typeError:el.inputmask._valueget不是函数maskScope@http:// localh

Question

我在Angular 2.0中使用Inputmask软件包。我添加了一个日期字段，上面添加了蒙版。当我第一次打开该页面时。然后不会发生错误，并且工作正常。

但是，当我重新访问页面时，它会显示以下错误：

错误 错误：未被发现(在承诺中(：typeError：el.inputmask._valueGet不是函数maskScope@http：//localhost：4200/0.Chunk.js：1391：91

import Inputmask from "inputmask"; 
@Component({
   template: `
     <input type="text" [formControl]="member_since" data-inputmask="'alias':'date'">
   `
})
...
ngOnInit() { 
  Inputmask().mask(document.querySelectorAll("input")); 
} 

Answer 1

您应该使用ngAfterViewInit Life-Cycle钩子，而不是ngOnInit。在视图初始化之后，您可以确定所有元素都存在：

ngAfterViewInit() { 
    Inputmask().mask(document.querySelectorAll("input")); 
}

这显然不是使用querySelectorAll的建议方法。这样，它将选择整个文档中的所有input元素。最好是创建一个模板ref变量，然后使用ViewChild将其导入组件。

@Component({
    template: `<input type="text" data-inputmask="'alias':'date'" #inputDate>`
})
export class InputDateComponent {
    @ViewChild('inputDate')
    public inputDate: ElementRef;
    ngAfterViewInit() { 
        Inputmask().mask(this.inputDate.nativeElement); 
    }
}

更好的是创建一个指令，但我会把它放在您身上，以弄清楚一个