如何从 Ionic 4/Angular7 中的@ViewChild 获取 nativeElement？

Question

我像这样使用 Ionic 4 的离子搜索：

     <ion-searchbar
            #searchbarElem
            (ionInput)="getItems($event)"
            (tap)="handleTap($event)"
            [(ngModel)]="keyword"
            (ngModelChange)="updateModel()"
            [cancelButtonText]="options.cancelButtonText == null ? defaultOpts.cancelButtonText : options.cancelButtonText"
            [showCancelButton]="options.showCancelButton == null ? defaultOpts.showCancelButton : options.showCancelButton"
            [debounce]="options.debounce == null ? defaultOpts.debounce : options.debounce"
            [placeholder]="options.placeholder == null ? defaultOpts.placeholder : options.placeholder"
            [autocomplete]="options.autocomplete == null ? defaultOpts.autocomplete : options.autocomplete"
            [autocorrect]="options.autocorrect == null ? defaultOpts.autocorrect : options.autocorrect"
            [spellcheck]="options.spellcheck == null ? defaultOpts.spellcheck : options.spellcheck"
            [type]="options.type == null ? defaultOpts.type : options.type"
            [disabled]="disabled"
            [ngClass]="{'hidden': useIonInput}"
            (ionClear)="clearValue(true)"
            (ionFocus)="onFocus()"
            (ionBlur)="onBlur()"
    >
    </ion-searchbar>

单击我运行组件中的以下内容：

@HostListener('document:click', ['$event'])
private documentClickHandler(event) {
    if ((this.searchbarElem
            && !this.searchbarElem._elementRef.nativeElement.contains(event.target))
        ||
        (!this.inputElem && this.inputElem._elementRef.nativeElement.contains(event.target))
    ) {
        this.hideItemList();
    }
}

但是，我收到以下错误：

ERROR TypeError: Cannot read property 'nativeElement' of undefined

我尝试设置超时并将 searchbarElem 声明为 ElementRef，但没有成功。

我知道这在 Angular 2/Ionic 2 中有效，但现在无效。有什么改变或者阴影 dom 影响了事情吗？如有任何帮助，我们将不胜感激。

Answer 1

您应该将 ViewChild 与 read: ElementRef 元数据一起使用属性:

@ViewChild("searchbarElem", { read: ElementRef }) private searchbarElem: ElementRef;

并使用 this.searchbarElem.nativeElement:

访问 HTMLElement

@HostListener('document:click', ['$event'])
private documentClickHandler(event) {
    console.log(this.searchbarElem.nativeElement);
}

请参阅 this stackblitz 以获得演示（请参阅主页中的代码）。

Answer 2

对于那些使用 Angular 8 和 Ionic 4 的人来说，可以在不攻击原生元素的情况下设置标志 static: false。

@ViewChild('searchInput', {static: false}) searchInput: IonSearchbar;

查看这个 Whosebug ：

Answer 3

在我的例子中，我需要原生 HTML 输入元素，它是离子输入的子元素，用于 Google 需要原生输入元素的地图自动完成。

从 promise

解析 getInputElement() returns

<ion-input #searchBox type="text"></ion-input>

...

@ViewChild('searchBox', {static: true}) searchElementRef: any;

.....

this.searchElementRef.getInputElement().then(nativeChildElement => { 
  // do something with native HTML element here ...
});

Answer 4

@ViewChild('inputSearch', { static: false }) inputSearch: IonSearchbar;

setTimeout(() => {
  this.inputSearch.getInputElement().then((el: HTMLInputElement) => {
    el.blur();
  });
}, 150);

如何从 Ionic 4/Angular7 中的@ViewChild 获取 nativeElement？

How to get nativeElement from @ViewChild in Ionic 4/Angular7?

ionic-framework

angular

ionic4

angular7