Làm cách nào để lấy đầu vào được bao bọc từ đầu vào ion trong Ionic2?

Question

Tôi muốn đính kèm một google.maps.places.Autocomplete một ion-input, nhưng trong Ionic2ion-input kết thúc tốt đẹp các yếu tố <input> và tôi không thể tìm ra cách để có được quyền truy cập vào nó.

tôi đã cố gắng tạo ra một chỉ thị và sử dụng thông qua vào ElementRef

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

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

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

nhưng nativeElement trả về đầu vào bọc.

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

Tôi cũng đã cố gắng tạo ra một thành phần tùy chỉnh tương tự như this và chuyển đổi Searchbar-TextInput, nhưng TextInput doesn't have .inputElement`.

Mọi ý tưởng đều được hoan nghênh.

Cảm ơn!

Answer 1

Không chắc đây là những gì bạn đang tìm kiếm (không biết 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); 
} 

Xem thêm angular 2/typescript : get hold of an element in the template

Answer 2

Đã cùng một câu hỏi. Một sự kết hợp của câu trả lời được chấp nhận và những bình luận bên dưới dường như giải quyết nó cho tôi.

Việc thêm chức năng này vào Chỉ thị của tôi dường như thực hiện. Tôi đang sử dụng nguyên cảo và định nghĩa typings cho GoogleMaps tìm thấy ở đây: 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

Tôi giải quyết nó theo cách này:

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

Và trong mã của tôi:

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