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 { }

成分</ P>

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

路由子组件角度

2 个答案: