将脚本应用于Angular 2上的输入

Applying script to input on Angular 2

本文关键字：输入 Angular 脚本 应用于      更新时间：2023-09-26

我想使用谷歌的Place Autocomplete来输入Angular 2模板的一部分。我知道我可以使用ElementRef访问元素，但这似乎不是最好的方式，我想尽我所能。为了测试不同的方法，我使用了一个点击事件来寻找我想将脚本应用到的元素：

<input type="text" id="city" (click)="initializeCityInput($event)" />

然后在我的角度分量上，我有：

initializeCityInput(event) {
    let input: HTMLInputElement = event.currentTarget;
    let options = {
        types: ['(cities)'],
        componentRestrictions: { country: 'au' }
    };
    let autocomplete = new this.w.google.maps.places.Autocomplete(input, options);
}

这个效果很好！但问题是，我必须单击我的输入来加载自动完成脚本。

对于输入或解决方法，是否存在类似"加载"的事件，以便立即加载脚本？

将模板变量（myInput）添加到模板中的元素时，可以使用@ViewChild('myInput')访问该元素。它返回一个ElementRef，它的nativeElement是对输入元素的引用：

@Component({
  selector: '...',
  template: `
    <input #myInput type="text" id="city" />
  `
})
class MyAutoComplete {
  @ViewChild('myInput') myInput;
  ngAfterViewInit() {
    this.initializeCityInput(myInput)
  }
  initializeCityInput(event) {
    let options = {
        types: ['(cities)'],
        componentRestrictions: { country: 'au' }
    };
    let autocomplete = new this.w.google.maps.places.Autocomplete(myInput.nativeElement, options);
  }
}

另请参阅angular 2/typescript：获取模板中的元素

相关文章：