Angular2:传递给子组件的 ng-content 属性
Angular2: ng-content attributes passing to child component
这样的事情可能吗?
我想通过 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 中的投影甚至可能吗?
可以将变量传递给投影内容(假设组件 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>
这样的事情可能吗?
我想通过 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 中的投影甚至可能吗?
可以将变量传递给投影内容(假设组件 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>