Ionic2のイオン入力からラップされた入力を取得するにはどうすればよいですか？

Question

は私がion-inputにgoogle.maps.places.Autocompleteを添付したいのですが、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包まれた入力を返しに渡さを使用してみました。

<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に似たカスタムコンポーネントを作成し、TextInputにSearchbarを切り替えてみましたが、TextInput doesn't have .inputElement`てきました。

アイデアを歓迎します。

ありがとうございます！

Answer 1

ない、これはあなたが探しているものであることを確認してください（イオンを知らない）

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

angular 2/typescript : get hold of an element in the templateにも

Answer 2

を参照してください同じ質問がありました。受け入れられた答えとその下のコメントの組み合わせは、私のためにそれを解決するように見えました。

この機能をmyディレクティブに追加したようです。私は活字体と を使用していますGoogleマップのためのタイピングの定義は、ここで見つける：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(); 
    }); 
}