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

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

CIC-input.component.html

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

這對於ng2中的預測是否可能？

Answer 1

可以將變量傳遞給投影內容（假設組件cjc-box聲明屬性focus ，組件cjc-input聲明屬性hasfocus ）：

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

這是單向綁定，如果你想要雙向綁定，它會稍微復雜一些：

• 將@Input()裝飾器添加到box組件的focus屬性。
• 將@Input()裝飾器添加到輸入組件的hasfocus屬性
• 添加@Output() hasfocusChange:EventEmitter<any> = new EventEmitter<any>(); 輸入組件。
• 添加this.hasfocusChange.emit(this.hasfocus); 在輸入組件中更改hasfocus之后。
• 將模板更改為<div cjc-box #box><div cjc-input [(hasfocus)]="box.focus"></div></div>