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的基于选择器的子项需要是直接子项 - 它们不能嵌套在其他组件中。作为替代方案，您可以执行以下操作：

<!ELEMENT meta EMPTY>
<!ATTLIST meta
  %i18n;
  id          ID             #IMPLIED
  http-equiv  CDATA          #IMPLIED
  name        CDATA          #IMPLIED
  content     CDATA          #REQUIRED
  scheme      CDATA          #IMPLIED
  >

<!--
  Relationship values can be used in principle:

   a) for document specific toolbars/menus when used
      with the link element in document head e.g.
        start, contents, previous, next, index, end, help
   b) to link to a separate style sheet (rel="stylesheet")
   c) to make a link to a script (rel="script")
   d) by stylesheets to control how collections of
      html nodes are rendered into printed documents
   e) to make a link to a printable version of this document
      e.g. a PostScript or PDF version (rel="alternate" media="print")
-->

角度/材质mat-form-field自定义组件 - ng-content中的matSuffix

1 个答案: