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>