3

我正在使用 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”。

4

1 回答 1

2

在 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
        });
    }       

}); 
}
于 2019-05-27T11:58:22.550 回答