複数のレベルのネストされたコンポーネントを角度で表示

Question

私は角度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

あなたはのコンポーネントテンプレート内に<second></second>コンポーネントを実装する必要があります。

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

あなたのモジュールは

Answer 2

MyAppComponent正しい<ng-content>要素を持っている必要があり、それ以外の場合は、投影コンテンツが表示されません。

注意：これは、ルートコンポーネントではないコンポーネントに対してのみ機能します。 Angularはルートコンポーネントへのコンテンツの投影をサポートしていません。混乱の原因を調べるには、質問の下のコメントを参照してください。