嵌套的子组件未加载/呈现

Question

我有以下结构：

在app-home我有几个没有被渲染的组件，例如一个名为<app-insightchart [applicationId]="applicationId"></app-insightchart>. 它既没有创建也没有加载（我有很多 console.logs 来验证:)）。

整个app-homeHTML 已加载，但组件未翻译（它们的标记未受影响）。

现在，如果我改为将该图表组件代码放入app-details其中，效果会非常好。

模块定义

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CreateApplicationComponent } from './admin/create/create.component';
import { EditComponent } from './admin/edit/edit.component';
import { MembersComponent } from './admin/members/members.component';
import { SummaryChartComponent } from "./charts/summary/summary.component";
import { InsightChartComponent } from "./charts/insights/insightchart.component";
import { GroupCreateComponent } from './group-create/group-create.component';
import { GroupListComponent } from './group-list/group-list.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ApplicationDetailsComponent } from "./details/details.component";
import { ApplicationHomeComponent } from "./details/home/home.component";
import { NavbarComponent } from './details/navbar/navbar.component';
import { PipeModule } from "../../pipes/pipe.module";
import { ControlsModule } from "../_controls/controls.module";

const ourRoutes: Routes = [
  { path: 'application/group/create', component: GroupCreateComponent },
  {
    path: 'application/:applicationId',
    component: ApplicationDetailsComponent,
    children: [
      {
        path: '',
        outlet: 'application-details-outlet',
        component: ApplicationHomeComponent
      }
    ]
  },
  { path: 'application/:applicationId/members', component: MembersComponent },
  { path: 'application/:applicationId/edit', component: EditComponent },
];

@NgModule({
  declarations: [
    CreateApplicationComponent,
    EditComponent,
    MembersComponent,
    SummaryChartComponent,
    InsightChartComponent,
    GroupCreateComponent,
    GroupListComponent,
    ApplicationDetailsComponent,
    NavbarComponent,
  ],
  imports: [
    PipeModule,
    CommonModule,
    FormsModule,
    ControlsModule,
    ReactiveFormsModule,
    RouterModule.forChild(ourRoutes)
  ],
  exports: [
    CreateApplicationComponent,
    SummaryChartComponent,
    InsightChartComponent,
    GroupCreateComponent,
    GroupListComponent
  ]
})
export class ApplicationModule { }

这是怎么回事？

Answer 1

您的主组件未导入，因此无法识别相邻组件 - 实际上只是忽略了它。

您必须直接在此处加载 home 组件或加载到此处加载的另一个模块中。目前，他们在上下文中彼此不了解。