嵌套子组件不是 loaded/rendered

Question

我有以下结构：

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

整个 app-home HTML 已加载，但组件未翻译（它们的标记未触及）。

现在，如果我将图表组件代码放在 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 组件或将其加载到此处加载的另一个模块中。目前他们在上下文中相互不了解。

嵌套子组件不是 loaded/rendered

Nested child component is not loaded/rendered

angular-components

angular