Angular 6：使用Angular Material从ng-content使父级可见指令

Question

我正在尝试在Angular 6中创建自定义Angular Material组件。 我试图设置类似这样的东西：

custom-input.component.html

<custom-input-wrapper>
        <input matInput/>
</custom-input-wrapper>

custom-input-wrapper.component.html

<mat-form-field class="field-wrapper" #field>
  <ng-content></ng-content>
</mat-form-field>

很明显，由于MatFormField在<ng-content>内部没有可见性来引用任何MatInput实例，因此会触发错误：

Error: mat-form-field must contain a MatFormFieldControl

有没有办法使<ng-content>中的内容可供其父母访问？

谢谢

Answer 1

这似乎可行：

https://stackblitz.com/edit/angular-6-make-directive-visible-to-parent-from-ng-content-usin?file=src/app/custom-input-wrapper/custom-input-wrapper.component.ts

获取MatFormFieldControl ContentChild并将其分配给MatFormField _control属性。