2017-08-18 3 views
1

私はアンギュラ4を初めて使用しています。コンテンツ投影法(別名トランジション)を角度で使用する方法

角度4の組み込みコンポーネントには疑問があります。

例:

<hero-list> 
    <hero></hero> 
    <hero></hero> 
</hero-list> 

私は別のコンポーネント内のコンポーネントを埋め込むされ、この構造に基づいてビューを作成する方法を知りたいと思いました。

+1

すでにコードを書いていますか?コードを投稿できますか? –

答えて

6

hero-listには<ng-content></ng-content>を使用してください。だからあなたは上記のあなたの希望を実現することができます。

英雄list.component.html

<div class="hero-list"> 
    <h1>Hero list</h1> 
    <ng-content></ng-content> 
</div> 

そして今、あなたはあなたのhero-item -componentsをラップすることができ、彼らはhero-list部品の内側に印刷されます。ここで

app.component.html

<hero-list> 
    <hero-item></hero-item> 
    <hero-item></hero-item> 
</hero-list> 

は実施例である:https://stackblitz.com/edit/angular-nvpmtc

そしてhereはangualrのコンテンツ投影程度の良い品です。

1

あなたは、サブビューのマスターレイアウトをしたいわけ場合は、ルータ・コンセントが間に切り替わります。この

<app-component> 
    <h1>Static title</h1> 
    <router-outlet></router-outlet> 
</app-component> 

のように見えるかもしれませんアンギュラルータhttps://angular.io/tutorial/toh-pt5

で見たいと思うかもしれません別のリンクに移動するときにルーティングファイルに定義されているさまざまなコンポーネントがありますが、その周囲のhtmlは変更されません。

関連する問題