Angular/Material mat-form-field 自定义组件 - ng-content 中的 matSuffix [英] Angular/Material mat-form-field custom component - matSuffix in ng-content

问题描述

我的想法是让基本组件提供一些功能，并根据需要添加 matSuffix 和 选项.组件 HTML 是:

My idea was to have basic component providing some functionality and add matSuffix and <mat-hint> options as necessary. The component HTML is:

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

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

However when I am using this in parent HTML template as

<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 内呈现，而不是作为后缀或提示.

The button and hint is rendered inside mat-form-field and not as suffix or hint.

有人吗?

Stackblitz

推荐答案

基于选择器的 MatFormField 子项需要是直接子项 - 它们不能嵌套在其他组件中.作为替代方案，您可以执行以下操作:

The selector based children of MatFormField need to be direct children - they can not be nested inside other components. As an alternative, you can do something like this:

<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>

这篇关于Angular/Material mat-form-field 自定义组件 - ng-content 中的 matSuffix的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！