Angular2 : ng-content attributes passing to child component

这样的事情可能吗？

我想通过ng-content属性将csc-box中的“hasfocus”变量传递给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中的投影甚至有可能吗？

最佳答案

可以将变量传递给投影内容(假设组件cjc-box声明属性focus和组件cjc-input声明属性hasfocus):

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

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

将@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>

关于Angular2 : ng-content attributes passing to child component，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36671223/