Angular 2 : ng-content attributes passing to child component

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>

这是单向绑定(bind)，如果您想要双向绑定(bind)，则稍微复杂一些:

• 添加@Input()装饰器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>