Angular2：ng-content属性が子コンポーネントに渡されます

Question

これが可能ですか？

"hasfocus"変数をcjc-boxからng-content属性に渡してcjc-inputコンポーネントに渡したいとします。

app.component.html

<div cjc-box><div cjc-input></div></div> 

CIC-box.component.html突起をこのも可能です

<input class="cjc-input" type="text" focus="{{hasfocus}}" /> 

<div class="cjc-box"> 
    <div><ng-content hasfocus="focus"></ng-content></div> 
</div> 

CIC-input.component.html ng2で？

Answer 1

それを投影内容に変数を渡すことが可能である（と仮定コンポーネントcjc-boxは、プロパティfocus宣言し、コンポーネントcjc-inputは、プロパティhasfocus宣言する）：あなたは双方向をしたい場合

は

<div cjc-box #box><div cjc-input [hasfocus]="box.focus"></div></div> 

これは、それが一方向結合されています少し複雑です：

• @Input()デコレータをfocusボックスコンポーネントのプロパティに追加します。
• 入力コンポーネント
• のhasfocusプロパティに@Input()デコレータを追加入力コンポーネントに@Output() hasfocusChange:EventEmitter<any> = new EventEmitter<any>();を追加します。
• 入力コンポーネントの変更がhasfocusの後にthis.hasfocusChange.emit(this.hasfocus);を追加します。
• テンプレートを<div cjc-box #box><div cjc-input [(hasfocus)]="box.focus"></div></div>