Angular 中的代码 2+ 路由组件不是 运行

Question

我在路线上有一个 Angular 组件（其中有一个路由器插座）。模板中的任何内容都按预期显示，路由器出口按预期工作，所以我知道路由设置正确；但是，该组件的 TypeScript 似乎不是 运行ning。无论我是使用 routerLink 导航还是从该路线启动应用程序都没有关系。构造函数或 ngOnInit 似乎都没有 运行。我正在使用 Angular 5.2.5.

@Component({
  template: `This is visible. <router-outlet></router-outlet>`
})
export class ApplicationComponent implements OnInit {

  constructor(sectionPagingService: SectionPagingService) {
    this.test();
  }

  ngOnInit() {
    this.test();
  }

  test() {
    alert('hello');
    console.log('hello');
  }

}

export const applicantRoutes: Routes = [
  {
    path: 'application',
    children:
      [
        { path: '', component: ApplicationComponent },
        { path: ':id',  children: [
          { path: 'media', component: MediaEditComponent },
          { path: 'birth', component: BirthEditComponent },
          { path: 'social', component: SocialEditComponent },
          { path: 'citizenship', component: CitizenshipEditComponent },
          { path: 'insurance', component: InsuranceEditComponent },
          { path: 'education', component: EducationEditComponent },
          { path: 'military', component: MilitaryEditComponent },
          { path: 'bankruptcy', component: BankruptcyEditComponent },
          { path: 'divorce', component: DivorceEditComponent },
          { path: 'certifications', component: CertificationsEditComponent },
        ] }
      ]
  },
  {
    path: 'instructions',
    component: InstructionsComponent
  },
  {
    path: 'confirmation',
    component: ConfirmationComponent
  }
];

我在这里错过了什么。

Answer 1

原来是我没有为path: 'application'设置组件。或者你可以说我的 ApplicationComponent 放错了地方。应该是：

export const applicantRoutes: Routes = [
  {
    path: 'application',
    component: ApplicationComponent,
    children:
      [
        { path: '', component: ApplicationShimComponent },
        { path: ':id',  children: [
          { path: 'media', component: MediaEditComponent },
          { path: 'birth', component: BirthEditComponent },
          { path: 'social', component: SocialEditComponent },
          { path: 'citizenship', component: CitizenshipEditComponent },
          { path: 'insurance', component: InsuranceEditComponent },
          { path: 'education', component: EducationEditComponent },
          { path: 'military', component: MilitaryEditComponent },
          { path: 'bankruptcy', component: BankruptcyEditComponent },
          { path: 'divorce', component: DivorceEditComponent },
          { path: 'certifications', component: CertificationsEditComponent },
        ] }
      ]
  },
  {
    path: 'instructions',
    component: InstructionsComponent
  },
  {
    path: 'confirmation',
    component: ConfirmationComponent
  }
];