自定义Angular/Material mat-form-field组件：matSuffix与mat-hint渲染异常问题

这个问题的核心是Angular Material的mat-form-field对内部特殊元素（比如matSuffix、mat-hint）有特定的内容投影要求——直接用普通的<ng-content>会把这些元素插入到mat-form-field中，但mat-form-field无法识别它们的角色，自然不会应用对应的样式和行为。

解决方案：使用带选择器的内容投影 #

你需要在自定义组件的模板中，为mat-form-field添加带有特定选择器的<ng-content>，精准匹配父组件传入的matSuffix按钮和mat-hint提示，让它们被mat-form-field正确识别。

修改后的自定义组件HTML代码如下：

<mat-form-field>
  <textarea 
    matInput 
    matTextareaAutosize 
    matAutosizeMinRows="1" 
    matAutosizeMaxRows="3"
    [placeholder]="placeholder" 
    [formControl]="inputField"
  ></textarea>
  
  <!-- 专门投影带有matSuffix属性的元素 -->
  <ng-content select="[matSuffix]"></ng-content>
  
  <!-- 专门投影mat-hint元素 -->
  <ng-content select="mat-hint"></ng-content>
</mat-form-field>

原理说明 #

mat-form-field内部通过内容投影的选择器来捕获特殊元素：

• 带有matSuffix属性的元素会被识别为后缀内容，渲染在输入框的右侧
• <mat-hint>元素会被识别为提示文本，渲染在输入框下方

通过给<ng-content>添加select属性，我们可以把父组件传入的对应元素精准投影到mat-form-field内部，这样mat-form-field就能正确识别并应用它们的样式和功能了。

扩展：处理多位置的mat-hint #

如果你的父组件需要使用align="start"或align="end"的mat-hint，可以进一步细化投影选择器：

<!-- 投影左侧提示 -->
<ng-content select="mat-hint[align='start']"></ng-content>
<!-- 投影右侧提示 -->
<ng-content select="mat-hint[align='end']"></ng-content>

这样修改后，你的父组件模板不需要做任何改动，原来的写法就能正常生效：按钮会作为后缀显示在输入框右侧，提示文本也会正确出现在输入框下方。

内容的提问来源于stack exchange，提问作者PeS