路由兒童組件角

Question

對不起，這個問題可能已經被問到。但是我試圖弄清楚我做錯了什麼，這已經過去了幾個小時。我想在父級內顯示一個子組件。但到目前爲止，我還沒有成功。

routing.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule, Routes } from '@angular/router'; 

import ... 

const routes: Routes = [ 

    { path: 'utilisateurs', component: UtilisateurComponent }, 
    { path: 'classifications', component: ClassificationComponent , 
    children: [ 
     { path: '', redirectTo: 'ajouter', pathMatch: 'full'}, 
     { path: 'ajouter', component: <any> 'AjouterClassificationComponent'} 
    ] 
    } 

] 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(routes), 
    // RouterModule.forChild(routes), 
    CommonModule 
    ], 
    exports:[ RouterModule ] 
    //declarations: [] 
}) 
export class RoutingModule { } 

組件

import {Component, OnInit, Input} from '@angular/core'; 
import {AppService} from "../../app-service.service"; 
import { Location } from "@angular/common"; 
import { Router, ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'app-classification', 
    templateUrl: './classification.component.html', 
    styleUrls: ['./classification.component.css'] 
}) 
export class ClassificationComponent implements OnInit { 

    constructor(
    private appService: AppService, 
    private location: Location, 
    private route: ActivatedRoute, 
    private router: Router 
) {} 

    ngOnInit(): void{ 
    this.appService.getClassifications() 
     .then(classifications => this.classifications = classifications) 
    } 


ouvrirFormulaireClassification(): void{ 
    //this.afficherFormulaireClassification = true; 
    this.router.navigate(['ajouter']); 
} 

} 

我的HTML模板

<br/> 
    <!--<a routerLink="['ajouter']"> 
     <input type="submit" value="Ajouter une classification"/> 
    </a>--> 
    <button (click)="ouvrirFormulaireClassification()">Ajouter une classification</button><br/> 
    </form> 

並在瀏覽器控制檯，我有這樣的錯誤很長的名單

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.entryComponents? 
Error: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.entryComponents? 
    at NoComponentFactoryError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7388:33) 
    at NoComponentFactoryError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:31323:16) 
    at new NoComponentFactoryError (http://localhost:4200/vendor.bundle.js:31443:16) 
    at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/vendor.bundle.js:31460:15) 
    at AppModuleInjector.CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/vendor.bundle.js:31504:35) 
    at RouterOutlet.activate (http://localhost:4200/vendor.bundle.js:78010:49) 
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:26177:16) 
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:26144:26) 
    at http://localhost:4200/vendor.bundle.js:26080:58 
    at Array.forEach (native) 
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:26080:29) 
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:26145:26) 
    at http://localhost:4200/vendor.bundle.js:26080:58 
    at Array.forEach (native) 
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:26080:29) 

zone.js:522 Unhandled Promise rejection: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.entryComponents? ; Zone: angular ; Task: Promise.then ; Value: 
NoComponentFactoryError {__zone_symbol__error: Error: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.en……} 
Error: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.entryComponents? 
    at NoComponentFactoryError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7388:33) 
    at NoComponentFactoryError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:31323:16) 
    at new NoComponentFactoryError (http://localhost:4200/vendor.bundle.js:31443:16) 
    at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/vendor.bundle.js:31460:15) 
    at AppModuleInjector.CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/vendor.bundle.js:31504:35) 
    at RouterOutlet.activate (http://localhost:4200/vendor.bundle.js:78010:49) 
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:26177:16) 
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:26144:26) 
    at http://localhost:4200/vendor.bundle.js:26080:58 
    at Array.forEach (native) 
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:26080:29) 
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:26145:26) 
    at http://localhost:4200/vendor.bundle.js:26080:58 
    at Array.forEach (native) 
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:26080:29) 

有人幫我嗎？謝謝！

Answer 1

您必須將組件導入到模塊中才能在路由中使用它（在這種情況下，假定根模塊爲app.module.ts）。

確保您的模塊具有這樣的：

declarations: [ 
    ... 
    AjouterClassificationComponent, 
    ... 
] 

使用路由字符串標識符將無法正常工作。 請勿將它們投射到<any>。導入和使用類來代替：

import AjouterClassificationComponent from '.../...component.ts'; 

---

{ path: 'ajouter', component: AjouterClassificationComponent} 

Answer 2

這段代碼是錯誤的

{ path: 'ajouter', component: <any> 'AjouterClassificationComponent'}

不要使用字符串的組件的名稱。 它應該是這樣的

{ path: 'ajouter', component: AjouterClassificationComponent}

而且，你忘了輸入您的NgModule您的組件

declarations: [ 
     UtilisateurComponent, 
     ClassificationComponent, 
     AjouterClassificationComponent 
     ] 
imports: [ 
    RouterModule.forRoot(routes), 
    CommonModule, 

    //more code below 
    ],