如何在angular2中绑定到投影内容中的属性？

我想使用内容投影，但我无法使其发挥作用

HTML是

<form [ngFormModel]="demoForm" (ngSubmit)="onSubmit()">
  <my-form-group myLabel="Some Label">
    <input type="text" [ngFormControl]="demoForm.controls['someInput'] [required]="true">
  </my-form-group>
</form>

您可以使用
ContentChild
装饰器在
ng content
中引用控件：

@Component({
  selector: 'my-form-group',
  template: `
    <div class="form-group">
      <label>{{myLabel}}<span *ngIf="required">&nbsp;*</span></label>
      <ng-content></ng-content>
    </div>
  `
})
export class MyFormGroup {
  @ContentChild(NgFormControl) state; // <------
  @Input() myLabel: string;

  ngAfterViewInit() {
    this.required = (this.state.validator === Validators.required); // <-------
  }
}

有关更多详细信息，请参见此问题：




有关更多详细信息，请参见本文（“字段的表单组件”一节）：




编辑

挖掘位后，您可以检查
RequiredValidator
指令是否应用于输入：

@Component({
  selector: 'my-form-group',
  template: `
    <div class="form-group">
      <label>{{myLabel}}<span *ngIf="required">&nbsp;*</span></label>
      <ng-content></ng-content>
    </div>
  `
})
export class MyFormGroup {
  @ContentChild(RequiredValidator) requiredValidator; // <------
  @Input() myLabel: string;

  constructor(private cdr:ChangeDetectorRef) {

  }

  ngAfterViewInit() {
    this.required = (this.requiredValidator != null); // <-------
    this.cdr.detectChanges();
  }
}

@组件({
选择器：“我的表单组”，
模板：`
{{myLabel}}*
`
})
导出类MyFormGroup{
@ContentChild（RequiredValidator）RequiredValidator；//因为我到现在为止没有得到更多的答案，同时我试图找到一个解决方案。我找到了一个，这不是很令人满意。我简单地将“required”也注入到外部容器中。我不喜欢这个解决方案，因为a已经注入了两次值

最后，我提出了一个新问题。但首先是代码：

<my-form-group myLabel="Hallo" [myRequired]="demoForm.controls['required'].value">
    <input type="text" [ngFormControl]="demoForm.controls['hallo']" [required]="demoForm.controls['required'].value">
    errors: {{demoForm.controls['hallo'].errors | json}}
</my-form-group>


错误：{{demoForm.controls['hallo'].errors | json}

和组件：

@Component({
  selector: 'my-form-group',
  template: `
  <div class="form-group">
    <label *ngIf="myLabel">{{myLabel}}<span *ngIf="myRequired">&nbsp;*</span></label>
    <ng-content></ng-content>
  </div>`
})
export class MyFormGroup {
  @Input() myLabel: string;
  @Input() myRequired: boolean;
  @ContentChild(NgFormControl) ctrl;
}

@组件({
选择器：“我的表单组”，
模板：`
{{myLabel}}*
`
})
导出类MyFormGroup{
@Input（）myLabel:字符串；
@Input（）myRequired:boolean；
@ContentChild（NgFormControl）ctrl；
}

我现在的下一个问题是：验证没有更新。请查看这个Plunkr，它还显示输入的错误对象。

有什么解决方法吗？（或者只是一个bug？）
而且，如果有一个比我的更好的解决方案，我会喜欢的。
Hallo Thierry，谢谢你的快速回答。我想允许属性的更改，如required或disable，由我的外部组件控制。如果我想在我的formbuilder.group中添加Validator.required，我会硬编码，不是吗？在我看来，我无法使用你的比较智慧h“this.state.validator”，因为在我使用属性时没有可用的验证器函数？不客气！所以你想使用
ngControl
的验证器内联声明，而不是使用
FormBuilder
？我问这个问题是因为你使用
ngFormModel
和
ngFormControl
…我想我明白了；-）你可以检查他对输入应用了
RequiredValidator
。我相应地更新了我的答案；-）不幸的是，我仍然无法实现这一点。我做了一个plunkr来说明我的意思。-这个.RequiredValidator在我的例子中是一个空对象。
<my-form-group myLabel="Hallo" [myRequired]="demoForm.controls['required'].value">
    <input type="text" [ngFormControl]="demoForm.controls['hallo']" [required]="demoForm.controls['required'].value">
    errors: {{demoForm.controls['hallo'].errors | json}}
</my-form-group>

@Component({
  selector: 'my-form-group',
  template: `
  <div class="form-group">
    <label *ngIf="myLabel">{{myLabel}}<span *ngIf="myRequired">&nbsp;*</span></label>
    <ng-content></ng-content>
  </div>`
})
export class MyFormGroup {
  @Input() myLabel: string;
  @Input() myRequired: boolean;
  @ContentChild(NgFormControl) ctrl;
}