css - 包裹在 matFormField 内时 matSuffix 不起作用

Question

我目前正在尝试编写一个全局日期选择器。为此，我创建了一个组件，从角度（https://material.angular.io/guide/creating-a-custom-form-field-control）观察给定示例。我只想外包整个 mat-form-field 的一部分，所以这就是我正在做的事情：

app.component.html：

  <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <my-date-picker formControlName="birthday"></my-date-picker>
  </mat-form-field>

我的日期picker.component.html：

<input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
  (ngModelChange)="modelChanged($event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

（我认为 .ts 对我的问题应该不重要）

但现在它看起来像这样：

如果我将它像这样包装在 app.component.html 中，也会发生这种情况：

  <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <div>
      <input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
      (ngModelChange)="modelChanged($event)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </div>
  </mat-form-field>

因为它会将 matSuffix 渲染为 mat-infix 的一部分。所以看起来 matSuffix 没有被正确识别。

虽然它会在没有额外包装器（div）的情况下呈现它：

放：

<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

在 app.component.html 中不是一个选项。我试过这个，这只会导致其他错误，这些错误比 css 错误更糟糕。

Answer 1

所以我发现 matSuffix 只适用于直系后代，找不到适合我的情况的任何解决方法。直到今天，这似乎是一个开放的“问题”。实际上，这应该是预期的行为，尽管很多人似乎都在努力解决它。

我通过使用指令而不是包装器组件解决了这个问题。该指令侦听诸如keydown和change之类的事件以验证日期输入并设置占位符，因此使用该指令的每个日期选择器都已经具有我想要的占位符。

如果有人对上述问题有实际的解决方案，请随时分享。