J'utilise Ionic 4's ion-search comme ceci:
<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>
Au clic, j'exécute ce qui suit à partir du composant:
@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();
}
}
Cependant, j'obtiens l'erreur suivante:
ERROR TypeError: Cannot read property 'nativeElement' of undefined
J'ai essayé de définir des délais d'expiration et de déclarer searchbarElem comme ElementRef
sans succès.
Je sais que cela a fonctionné en Angular 2/Ionic 2 mais maintenant ce n'est pas le cas. Est-ce que quelque chose a changé ou est-ce que l'ombre dom affecte la chose? Toute aide serait appréciée, merci.
Vous devez utiliser ViewChild
avec le read: ElementRef
propriété de métadonnées:
@ViewChild("searchbarElem", { read: ElementRef }) private searchbarElem: ElementRef;
et accédez à HTMLElement avec this.searchbarElem.nativeElement
:
@HostListener('document:click', ['$event'])
private documentClickHandler(event) {
console.log(this.searchbarElem.nativeElement);
}
Voir ce stackblitz pour une démo (voir le code dans la page d'accueil).
Pour ceux qui travaillent avec Angular 8 et Ionic 4 on peut définir le drapeau static: false
sans attaquer les éléments natifs.
@ViewChild('searchInput', {static: false}) searchInput: IonSearchbar;
Voir ce Stackoverflow thread :