“窗口”类型上不存在属性“intlTelInput”

Question

我正在使用 angular7。我的网站需要国际电话输入 (https://intl-tel-input.com/)。

所以我使用下面的注释来安装 CDN。

npm uninstall ng2-tel-input --save

之后我调用了 angular.json 中的 CSS 和 JS 文件

"styles": [
     "node_modules/intl-tel-input/build/css/intlTelInput.min.css",
      "src/styles.css"
],
"scripts": [
    "node_modules/intl-tel-input/build/js/utils.js",
    "node_modules/intl-tel-input/build/js/intlTelInput.min.js"
],

在“contactform.compenent.html”中添加了电话号码的输入字段

<input type="tel" class="form-control" value="" placeholder="Mobile number"
       id="telnumber-field" required>

并在“app.compenent.ts”中添加了电话区的脚本

ngOnInit(){

jQuery( document ).ready( function( $ ) {   

    if(jQuery('#telnumber-field').length){
        var input = document.querySelector("#telnumber-field");
        window.intlTelInput(input, {
            preferredCountries: ['in'],
            separateDialCode: true
        });
    }       

}); }

但是有一个错误来了。

src/app/app.component.ts(65,11) 中的错误：错误 TS2339：“窗口”类型上不存在属性“intlTelInput”。

Answer 1

在 typescript 编译时 intlTelInput 对象未在窗口对象上创建。将窗口类型更改为 any 以跳过窗口持续时间编译的属性检查。 intlTelInput 在浏览器中加载应用程序后可见，因此应用程序将按预期工作。

  ngOnInit(){

   jQuery( document ).ready( function( $ ) {   

    if(jQuery('#telnumber-field').length){
        var input = document.querySelector("#telnumber-field");
       (<any>window).intlTelInput(input, {
            preferredCountries: ['in'],
            separateDialCode: true
        });
    }       

}); 
}