Angular 6：使用 Angular Material 使指令对 ng-content 的父级可见答案

【问题标题】：Angular 6: Make directive visible to parent from ng-content using Angular MaterialAngular 6：使用 Angular Material 使指令对 ng-content 的父级可见
【发布时间】：2018-12-21 09:16:16
【问题描述】：

我正在尝试在 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> 中的内容？

谢谢

【问题讨论】：

标签： angular angular-material

【解决方案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 属性。

【讨论】：

确实如此！谢谢！