Пользовательский компонент Angular / Material mat-form-field - matSuffix в ng-content

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>