Angular 2+ 路由组件中的代码未运行答案

【问题标题】：Code in Angular 2+ routing component not runningAngular 2+ 路由组件中的代码未运行
【发布时间】：2023-04-05 12:08:02
【问题描述】：

我在路由上有一个 Angular 组件（其中有一个路由器出口）。模板中的任何内容都按预期显示，并且路由器插座按预期工作，所以我知道路由设置正确；但是，该组件的 TypeScript 似乎没有运行。我是使用 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
  }
];

我在这里错过了什么。

【问题讨论】：

你是否从 Angular 核心导入了 OnInit？
您是否针对路由器模块注册了您的路由？

标签： angular angular-routing

【解决方案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
  }
];

【讨论】：