Come posso ottenere l'input avvolto da un input di ioni in Ionic2?

Question

mi piacerebbe collegare un google.maps.places.Autocomplete a un ion-input, ma in Ionic2ion-input avvolge l'elemento <input> e io non riesco a capire come ottenere l'accesso ad esso.

Ho cercato di creare una direttiva e con il passato in ElementRef

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

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

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

ma nativeElement restituisce l'ingresso avvolto.

<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> 

ho provato anche la creazione di un componente personalizzato simile a this e il passaggio Searchbar-TextInput, ma TextInput doesn't have .inputElement`.

Tutte le idee sarebbero benvenute.

Grazie!

Answer 1

Non è sicuro questo è quello che stai cercando (non so ionico)

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

Vedi anche angular 2/typescript : get hold of an element in the template

Answer 2

avuto la stessa domanda. Una combinazione della risposta accettata e dei commenti sotto sembrava risolverlo per me.

L'aggiunta di questa funzione alla mia Direttiva sembrava farlo. Sto usando tipografico e la definizione tipizzazioni per googlemaps trovato qui: 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

ho risolto in questo modo:

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

E nel mio codice:

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