web-dev-qa-db-ja.com

Ionic 4 / Angular7で@ViewChildからnativeElementを取得する方法は？

私は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が影響を受けていますか？助けていただければ幸いです。

angularionic-frameworkionic4angular7
4
Jeremy Quick

read: ElementRefメタデータプロパティとともにViewChildを使用する必要があります。

@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 を参照してください（ホームページのコードを参照）。

9
ConnorsFan

Angular 8とIonic 4で作業している人は、フラグstatic: falseネイティブ要素を攻撃することなく。

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

このStackoverflowを参照 thread ：

5
feder