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不支持将内容投影到根组件。 请参阅问题下方的评论，以了解引起混乱的原因。