Angular / Material mat-form-field自定义组件-ng-content中的matSuffix

Question

我的想法是让基本组件提供一些功能以及必要时添加matSuffix和<mat-hint>选项。组件HTML是：

<mat-form-field>
  <textarea matInput matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="3"
    [placeholder]="placeholder" [formControl]="inputField"></textarea>
  <ng-content></ng-content>
</mat-form-field>

但是当我在父HTML模板中使用它时

<my-component ...>
  <button matSuffix ...><mat-icon>something</mat-icon></button>
  <mat-hint>Press Ctrl+Enter to finish input</mat-hint>
</my-component>

按钮和提示呈现在内部，mat-form-field而不是后缀或提示。

有人吗

编辑：Stackblitz

Answer 1

MatFormField的基于选择器的子级必须是直接子级-不能嵌套在其他组件中。或者，您可以执行以下操作：

<mat-form-field>
  <textarea matInput matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="3"
    [placeholder]="placeholder" [formControl]="inputField"></textarea>
  <span matSuffix>
    <ng-content select="[suffix]"></ng-content>
  </span>
  <mat-hint>
    <ng-content select="[hint]"></ng-content>
  </mat-hint>
</mat-form-field>

...

<my-component ...>
  <span suffix><button><mat-icon>something</mat-icon></button></span>
  <span hint>Press Ctrl+Enter to finish input</span>
</my-component>