我如何添加一个指令到所有实例的Angular材质日期选择器?

Question

我已经创建了一个自定义指令，用于检查angular材质日期选择器中的手动条目(在这里的帮助下)，并且它正在工作。

问:是否有任何方法将该指令添加到已经存在于项目中的所有实例中，而无需逐个添加指令?

我的指令:

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指令添加到材料日期选择器输入的每个实例中，而无需手动添加它，因为每次它已在整个项目中使用?

Answer 1

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

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

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

另一个例子:

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

将针对所有具有matDatepicker属性的input。

标签也是如此:

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