親から子へのhtmlの定義

Question

子コンポーネントに渡すことができる親コンポーネントでいくつかのhtmlを定義しようとしています。これは可能ですか？私はこれのようなものを試しました：How to pass an expression to a component as an input in Angular2?、しかし私は運がなかった。たぶん私の構文が間違っていた。私は少しletと混同していました。私はこれをより良く理解するのを助けるために、すべてのヘルプと説明を感謝します。

@Component({ 
    selector: 'app-my-child', 
    template: ` 
    <div>other child html</div> 
    <ng-content></ng-content> 
    ` 
}) 
export class MyChild { 
} 

は、あなたがng-を削除する必要があります。

@Component({ 
    selector: 'app-my-parent', 
    template: ` 
    <div>other parent html</div> 
    <app-my-child [property]="value"> 
     <ng-template #someTemplate">value.first</ng-template> 
    </app-my-child> 
    <app-my-child [property]="value"> 
     <ng-template #someTemplate">value.second</ng-template> 
    </app-my-child> 
    ` 
}) 
export class MyParent { 
} 

@Component({ 
    selector: 'app-my-child', 
    template: ` 
    <div>other child html</div> 
    how do I access the template from here? Is there a way to do binding with templates? 
    ` 
}) 
export class MyChild { 
     @Input() property; 
} 

Answer 1

は、あなたはコンテンツをtranscludeことになっています知っていて、どこコンテンツを置くために、あなたの子コンポーネントので、角にNG-コンテンツのタグを追加する必要がありますテンプレートタグ、それは彼らがテンプレートが親にそれを使用して他の場所で

使用されることを意図しているので、実際に、すべてのこれらの事をレンダリングしないように、角度指示するための超簡単です：

<app-my-child>Anything put between these component tags will be transcluded to the ng-content tag</app-my-child> 

Answer 2

@ bryan60が指摘したように、子テンプレートには<ng-content>が必要です。 AfterContentInit()ライフサイクルフックが実行される直前に、親では、あなたは子供セレクタ内に置くすべてのものはNG-コンテンツの位置に表示されます。

親コンポーネントテンプレート：

<child-cmp> 
    <p>This will appear within ng-content of ChildComponent</p> 
</child-cmp> 

子コンポーネントテンプレート：

<h2>I am ChildComponent</h2> 
    <ng-content></ng-content> 

Live demo