typescript - Angular 使用 @Inputs 扩展指令

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

我的目标是用 <input myCustomPhoneNumber> 替换 <input mask="(000) 000-0000" 的功能，这样我应用中的所有电话号码都会遵循相同的格式，错误的风险也会更小。

我尝试过扩展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> 时则不行

我卡在这里了。任何帮助都将不胜感激。