我正在使用 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 中有效,但现在不行了。是不是有什么东西发生了变化或者是 Shadow dom 影响了事情?任何帮助将不胜感激,谢谢。
你应该使用ViewChild
与read: ElementRef
元数据属性:
@ViewChild("searchbarElem", { read: ElementRef }) private searchbarElem: ElementRef;
并使用以下命令访问 HTMLElementthis.searchbarElem.nativeElement
:
@HostListener('document:click', ['$event'])
private documentClickHandler(event) {
console.log(this.searchbarElem.nativeElement);
}
See 这次堆栈闪电战 https://stackblitz.com/edit/ionic3-search-bar-sample-xb2cq2演示(请参阅主页中的代码)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)