Angular2：传递给子组件的 ng-content 属性

Question

这样的事情可能吗？

我想通过 ng-content 属性将一个 "hasfocus" 变量从 cjc-box 传递到 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() 装饰器添加到框组件的 focus 属性。
将 @Input() 装饰器添加到输入组件 hasfocus 属性
将@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>

Angular2: ng-content attributes passing to child component