angular - 使用 @Inputs 的角度扩展指令

Question

我正在尝试MaskDirective从 ngx-mask ( https://www.npmjs.com/package/ngx-mask ) 扩展 a。

我的目标是替换<input mask="(000) 000-0000"with的功能，<input myCustomPhoneNumber>以便我的应用程序中的所有电话号码都遵循相同的格式，从而减少拼写错误的风险。

我尝试过扩展，MaskDirective但无法使行为正确。这就是我所拥有的。

@Directive({
    selector: '[myCustomPhoneNumber]',
    providers: [
        MaskService
    ]
})
export class PhoneNumberDirective extends MaskDirective {

    constructor(private elRef: ElementRef,
                private renderer: Renderer2,
                private maskService: MaskService) {
        super(elRef, maskService);
        this.maskExpression = '(000) 000-0000';
    }

}

该this.maskExpression属性是我认为控制父指令的东西，但它似乎没有采用我设置的值。

我也尝试过maskExpression将

@Input('myCustomPhoneNumber')
maskExpression: string = '(000) 000-0000';

这在模板看起来像 <input myCustomPhoneNumber="(000) 000-0000">但不是<input myCustomPhoneNumber>

这就是我卡住的地方。任何帮助表示赞赏。