カスタム要素「my-button」を定義しました。このボタンには、このボタンのアイコンとテキストを自動的に設定するタイプがあります。例えば
<my-button buttontype="add"></my-button>
<my-button buttontype="delete"></my-button>
..。
これまでのところ大丈夫です。
次に、「my-button」のリストを含む2番目のカスタム要素「my-menubar」を実装します。
例えば
<my-menubar>
<my-buttons>
<my-button buttontype="add"></my-button>
<my-button buttontype="delete"></my-button>
/my-buttons>
</my-menubar>
私の質問、どうすればこれを行うことができますか？
コンテンツの投影が必要です。これがあなたがそれを達成する方法です
@Component({
selector: 'my-menubar',
template: `
<ng-content select="[my-buttons]"></ng-content>
`
})
export class MyMenubarComponent {
}
そして、あなたはそれを次のように使うことができます
<my-menubar>
<div my-buttons>
<my-button buttontype="add"></my-button>
<my-button buttontype="delete"></my-button>
</div>
</my-menubar>
[my-buttons]属性として選択します。そうでない場合は、セレクターを使用してコンポーネントを作成する必要がありますmy-buttons
次のようにコンポーネントを使用する場合
<my-menubar>
<my-buttons>
<my-button buttontype="add"></my-button>
<my-button buttontype="delete"></my-button>
</my-buttons>
</my-menubar>
次のように別のコンポーネントを作成する必要があります
@Component({
selector: 'my-buttons',
template: `
<ng-content></ng-content>
`
})
export class MyButtonsComponent {}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加