Angular2: атрибуты ng-содержимого, передаваемые дочернему компоненту

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() декоратор для focus свойство компонента box.
• добавлять @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>