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

在打字稿编译时，未在窗口object上创建 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
        });
    }       

}); 
}

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

1 个答案: