如何从Ionic2中的离子输入中获取包裹的输入？ [英] How can I get the wrapped input from an ion-input in Ionic2?

问题描述

我想将 google.maps.places.Autocomplete 附加到 ion-input ，但是在 Ionic2 ion-input 包装< input> 元素，我不能弄清楚如何访问它。

I'd like to attach an google.maps.places.Autocomplete to an ion-input, but in Ionic2 ion-input wraps the <input> element and I can't figure out how to get access to it.

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

I've tried creating a directive and using the passed in 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>

我还尝试创建一个类似于这个并将搜索栏切换为 TextInput ，但 TextInput没有 .inputElement`。

I've also tried creating a custom component similar to this and switching Searchbar to TextInput, but TextInput doesn't have.inputElement`.

任何想法都会受到欢迎。

Any ideas would be welcome.

谢谢！

推荐答案

不确定这就是你要找的东西（不知道离子）

Not sure this is what you're looking for (don't know 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);
}

参见 angular 2 / typescript：获取模板中的元素

这篇关于如何从Ionic2中的离子输入中获取包裹的输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！