如何向 Angular Material datepicker 的所有实例添加指令？

Question

我创建了一个自定义指令，用于检查 angular material 日期选择器 (with help of here) 中的手动条目，它正在运行。

问：有什么方法可以把那个指令添加到项目中已经存在的所有实例中，而不是一个一个添加指令？

我的指令：

import { Directive, ElementRef, HostBinding, OnDestroy, OnInit } from '@angular/core';
import * as textMask from '../../../util/vanillaTextMask.js';

@Directive({
  selector: `fed-mask, [fed-mask], [fedMask]`
})
export class FedMaskDirective implements OnInit, OnDestroy {
  @HostBinding('class.fed-mask') compClass = true;


  fedMask = {
    mask: [
      new RegExp('\d'),
      new RegExp('\d'),
      '.',
      new RegExp('\d'),
      new RegExp('\d'),
      '.',
      new RegExp('\d'),
      new RegExp('\d'),
      new RegExp('\d'),
      new RegExp('\d')
    ],
    showMask: false,
    guide: false,
    placeholderChar: '_'
  };

  maskedInputController;

  constructor(private element: ElementRef) { }

  ngOnInit(): void {
    this.maskedInputController = textMask.maskInput({
      inputElement: this.element.nativeElement,
      ...this.fedMask
    });
  }

  ngOnDestroy() {
    this.maskedInputController.destroy();
  }
}

我目前的使用方式：

  <mat-form-field>
                <input
                  (dateChange)="DateChange($event)"
                  formControlName="Date"
                  [matDatepicker]="Datepicker"
                  matInput
                  placeholder="Date"
                  (click)="Datepicker.open()"
                  fedMask
                >
                <mat-datepicker-toggle matSuffix [for]="Datepicker"></mat-datepicker-toggle>
                <mat-datepicker #Datepicker></mat-datepicker>
                <mat-error *ngIf="form.get('Date').hasError('required')">
                  Error
                </mat-error>
              </mat-form-field>

期望：

有什么方法可以将 fedMask 指令添加到 material 日期选择器输入的每个实例，而无需每次在整个项目中使用它时都手动添加它？

Answer 1

您可以使用任何现有属性作为选择器，例如

@Directive({
  selector: "matDatepicker",
})

将针对每个具有属性 matDatepicker 的元素。

另一个例子：

@Directive({selector: 'input:([matDatepicker])' })

将针对具有 matDatepicker 属性的每个 input。

标签也是如此：

@Directive({
  selector: "mat-datepicker",
})

如何向 Angular Material datepicker 的所有实例添加指令？

How can I add a directive to all instances of Angular Material datepicker?

javascript

angular

angular-material

angular-directive