路由儿童组件角

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 
    ],