Angular 中的多个级别嵌套组件

Question

我正在使用 Angular 5+，我想创建 3 层以上的嵌套组件。

这是我可以做的一个例子。

<my-app>
<first></first>
<second></second>
</myapp>

这是我不能做的。

<my-app>
<first><second></second></first>
</myapp>

我的应用程序模块中有以下代码。

@NgModule({
  declarations: [
    AboutPage,FirstComponent,SecondComponent
  ],
  imports: [
    IonicPageModule.forChild(AboutPage),
    ],
})

export class AppModule{}

这里注意 AppModule 不是根模块，但它也是 lazyLoaded 组件。

Answer 1

您必须在 <first></first> 的组件模板中实施 <second></second> 组件。

@Component({
  selector: 'first',
  template: '<second></second>'
})
export class FirstComponent { ... }

你的模块是正确的

Answer 2

MyAppComponent需要有一个<ng-content>元素，否则不会显示投影内容。

注意：这仅适用于非根组件的组件。 Angular 不支持将内容投影到根组件。请参阅问题下方的评论，了解导致混淆的原因。

Angular 中的多个级别嵌套组件

Multiple leveles nested components in Angular

javascript

angular-components

angular