Question

我正在使用Angular 5+，我想在嵌套组件上创建3个级别。

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

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

这是我不能做的事情。

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

我的app模块中有以下代码。

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

export class AppModule{}

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

Answer 1

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

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

你的模块是正确的

Answer 2

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

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

Angular

2 个答案: