如何从 Ionic2 中的离子输入获取包装输入？

Question

我想将 google.maps.places.Autocomplete 附加到 ion-input，但在 Ionic2 ion-input 中包含 <input>元素，我不知道如何访问它。

我尝试创建指令并使用传入的 ElementRef

import {Directive, ElementRef, Input} from 'angular2/core';

@Directive({
    selector: '[location-picker]'
})

export class LocationPicker {
    constructor(el: ElementRef) {    
        console.log(el.nativeElement);    
    }
}

但 nativeElement returns 包装输入。

<ion-input location-picker="">
    <input class="text-input ng-valid ng-dirty ng-touched" type="text" placeholder="" aria-labelledby="lbl-6" location-picker="" autocomplete="off" autocorrect="off">
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
</ion-input>

我还尝试创建一个类似于 this 的自定义组件并将 Searchbar 切换为 TextInput，但是 TextInput doesn't have.inputElement`.

欢迎提出任何想法。

谢谢！

Answer 1

不确定这是否是您要查找的内容（不了解 Ionic）

<ion-input location-picker="">
    <input #myInput class="text-input ng-valid ng-dirty ng-touched" type="text" placeholder="" aria-labelledby="lbl-6" location-picker="" autocomplete="off" autocorrect="off">
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
</ion-input>

@ViewChild('myInput') input; 

ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

另见

Answer 2

有同样的问题。接受的答案和下面的评论的组合似乎为我解决了这个问题。

将此功能添加到我的指令中似乎可以做到。我正在使用打字稿和在这里找到 googlemaps 的类型定义：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/googlemaps/google.maps.d.ts

ngAfterViewInit() {
    var input: HTMLInputElement = <HTMLInputElement>this._el.querySelector("input");
    this.autocomplete = new google.maps.places.Autocomplete(input, {});
    google.maps.event.addListener(this.autocomplete, 'place_changed', () => {
      var place: google.maps.places.PlaceResult = this.autocomplete.getPlace();
      this.invokeEvent(place);
    });
  }

Answer 3

我是这样解决的：

<ion-item>
    <ion-label>Search your city</ion-label>
    <ion-input formControlName="placeAutofill" id="googlePlaces" required></ion-input>
</ion-item>

在我的代码中：

ionViewWillEnter() {
   // Google Places API auto complete
   let input = document.getElementById('googlePlaces').getElementsByTagName('input')[0];
   let autocomplete = new google.maps.places.Autocomplete(input, {types: ['geocode']});
   google.maps.event.addListener(autocomplete, 'place_changed', () => {
     // retrieve the place object for your use
     let place = autocomplete.getPlace();
   });
}

如何从 Ionic2 中的离子输入获取包装输入？

How can I get the wrapped input from an ion-input in Ionic2?

ionic-framework

ionic2

angular