导航到子组件时，未调用ngOnInit（但是按预期调用构造函数和ngOnDestroy）

我有一个组件 ViewBotsComponent ，它有2个子组件： ViewCodeBasedBotComponent 和 ViewPipelineBasedBotsComponent .

我按如下方式路由它们：

const routes: Route[] = [
  {
    path: "core", component: CoreWrapperComponent, children:[
      {path: 'viewbots', component: ViewBotsComponent, children:
          [
            {path: 'codebased', component: ViewCodeBasedBotComponent},
            {path: 'intelligent', component: ViewPipelineBasedBotsComponent},
            // {path: '', component: ViewCodeBasedBotComponent}
          ]
      }
  },
  ...
]

当我在 http://localhost:4200/core/viewbots/codebased 和 http://localhost:4200/core/viewbots/intelligent 之间切换时，正在为子组件调用 constructor 和 ngOnDestroy but ngOnit is not being called .

现在它变得怪异了： If I reload my browser tab, everything works fine and ngOnInit is being called as expected.

以下是30秒的问题视频，请注意，最初没有记录ngOninit，但重新加载后正在记录：https://youtu.be/_HCh3eJAX9I

以下是我的代码：

Parent component html: (view-bots.component.html)

<ul class="nav nav-tabs my-2">
  <li class="nav-item">
    <a class="nav-link" [ngClass]="{'tab-active':activeTab==='codebased'}" (click)="changeActiveTab('codebased')" ><strong>CODE BASED BOTS</strong></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [ngClass]="{'tab-active':activeTab==='intelligent'}" (click)="changeActiveTab('intelligent')" ><strong>PIPELINE BASED BOTS</strong></a>
  </li>
</ul>

<router-outlet></router-outlet>

Parent component ts: (view-bots.component.ts)

export class ViewBotsComponent implements OnInit {

  botList$: Observable<IBot[]>;
  activeTab:string = "codebased";

  constructor(
    private serverService: ServerService,
    private constantsService: ConstantsService,
    private router:Router,
    private store: Store) {
  }

  ngOnInit() {
    console.log('ViewBotsComponent init');
  }
  changeActiveTab(activeTab){
    console.log("hi");
    this.router.navigate(['core','viewbots',activeTab]);
    this.activeTab =activeTab

  }
}

Child1 html: view-pipeline-based-bots.component.html

<p>pipelineBasedBotList</p>

Child1 ts: view-pipeline-based-bots.component.ts

export class ViewPipelineBasedBotsComponent implements OnInit, OnDestroy {
  ngOnDestroy(): void {
    console.log('pipelineBasedBotList destroyed');
  }

  constructor() {
    console.log("ViewPipelineBasedBotsComponent constructor")
  }

  ngOnInit() {
    console.log('pipelineBasedBotList init');
  }

}

Child2 html: view-code-based-bot.component.html

<p>ViewCodeBasedBotComponent</p>

Child2 ts: view-code-based-bot.component.ts

export class ViewCodeBasedBotComponent implements OnInit, OnDestroy {

  constructor(private store: Store) {
    console.log("ViewCodeBasedBotComponent constructor")
  }

  ngOnInit(){
    console.log("ViewCodeBasedBotComponent init")
  }

  ngOnDestroy(): void {
    console.log("ViewCodeBasedBotComponent destroyed")
  }

}

app.module.ts

const routes: Route[] = [
  {
    path: "core", component: CoreWrapperComponent, children:[
      {path: 'viewbots', component: ViewBotsComponent, children:
          [
            {path: 'codebased', component: ViewCodeBasedBotComponent},
            {path: 'intelligent', component: ViewPipelineBasedBotsComponent},
            // {path: '', component: ViewCodeBasedBotComponent}
          ]
      },
      {path: 'botdetail', component: BotDetailWrapperComponent, children:
          [
            {path: 'codebased/:id', component: CodeBasedBotDetailComponent},
            {path: 'intelligent/:id', component: PipelineBasedBotDetailComponent},
          ]
      },
      {path: 'analytics', component: WrapperComponent, children:
          [
            {path: 'overview', component: OverviewComponent},
            {path: 'users', component: UsersComponent},
            {path: 'sessions', component: SessionsComponent},
            {path: 'messages', component: MessagesComponent},
            {path: 'platforms', component: PlatformsComponent},
            {path: 'events', component: EventsComponent},
            {path: 'engagement', component: EngagementComponent},
            {path: 'usage', component: UsageComponent}
          ]
      },

      {path: 'customner', component: ViewCustomnerComponent},
      {path: 'customner/create', component: CreateCustomnerComponent},
      {path: 'enterpriseprofile', component: EnterpriseprofileComponent},
      {path: 'profile', component: ProfileComponent},
      {path: 'reports', component: ReportsComponent},
      {path: 'documentation', component: DocumentationComponent},
      // {path: 'buildbot/codebased', component: BuildCodeBasedBotComponent},
      // {path: 'buildbot/intelligent', component: BuildPipelineBasedBotComponent},
      {path: 'buildbot', component: BuildbotWrapperComponent, children:
          [
            {path: 'codebased', component: BuildCodeBasedBotComponent},
            {path: 'intelligent', component: BuildPipelineBasedBotComponent},
            {path: '', component: ViewCodeBasedBotComponent}
          ]
      },
      // {path: 'viewbots/codebased', component: ViewCodeBasedBotComponent},
      // {path: 'viewbots/intelligent', component: ViewPipelineBasedBotsComponent},
      {path: 'login',  component: LoginComponent, pathMatch: 'full'},
      {path: 'login',  component: LoginComponent, pathMatch: 'full'},

      {path: '**', component: NotFoundComponent}
    ],
  },
  {path: "auth", component: AuthWrapperComponent, children: [
      {path:'login', component: LoginComponent},
      {path:'auth', component: SignupComponent}
    ]},
  {path: '',  redirectTo: 'core/viewbots/codebased',pathMatch: 'full'},
];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    ViewBotsComponent,
    ViewCodeBasedBotComponent,
    ViewPipelineBasedBotsComponent,
    BotPreviewCardComponent,
    NotFoundComponent,
    BuildCodeBasedBotComponent,
    BuildPipelineBasedBotComponent,
    RouterFragmentActiveDirective,
    BasicInfoFormComponent,
    AvatorFormComponent,
    PipelineComponent,
    KnowledgeBaseComponent,
    CodeInputComponent,
    IntegrationOptionListComponent,
    CodeEditorComponent,
    IntegrationItemComponent,
    DraggableDirective,
    DropTargetDirective,
    DocumentationComponent,
    ViewCustomnerComponent,
    CreateCustomnerComponent,
    OverviewComponent,
    UsersComponent,
    SessionsComponent,
    MessagesComponent,
    PlatformsComponent,
    EventsComponent,
    EngagementComponent,
    UsageComponent,
    ProfileComponent,
    EnterpriseprofileComponent,
    WrapperComponent,
    ReportsComponent,
    ChartComponent,
    BuildbotWrapperComponent,
    LoginComponent,
    CoreWrapperComponent,
    SignupComponent,
    AuthWrapperComponent,
    PipelineTestComponent,
    BotDetailComponent,
    HandsontableComponent,
    SmartTableComponent,
    BotDetailWrapperComponent,
    CodeBasedBotDetailComponent,
    PipelineBasedBotDetailComponent,
    BotTestingComponent,
    ConsumersComponent,
    SessionComponent,
    BotSessionsComponent,
    ChatWrapperComponent,
    ChatWindowComponent,
    ChatMessageComponent,
    BotWelcomeComponent,
    ChatListComponent,
    ChatItemComponent,
    ChatroomComponent,
    ScrollerDirective,
    ReportDetailsComponent,
    ReportDisplayComponent,
    ReportControlsComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes), // RouterModule.forRoot(routes, { useHash: true }), if this is your app.module
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    AceEditorModule,
    UiSwitchModule,
    FormsModule,
    DragAndDropModule.forRoot(),
    ChartModule,
    NgxsModule.forRoot([AuthStateReducer,
      NavigationStateReducer,
      AppStateReducer,
      EnterpriseprofileStateReducer,
      ViewBotStateReducer,
      ChatSessionStateReducer,
      BotCreationStateReducer,
      AnalysisStateReducer
    ]),
    NgxsReduxDevtoolsPluginModule.forRoot(),
    NgxsLoggerPluginModule.forRoot(),
    HttpClientModule,
    DragulaModule,
    HotTableModule,
    Ng2CompleterModule,
    Ng2SmartTableModule,
    BsDatepickerModule.forRoot(),
    TooltipModule.forRoot()
  ],
  providers: [DragService, AimService,{
    provide: NGXS_PLUGINS,
    useValue: persistPlugin,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule {

}