Question

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

{
  "list": [{
      "name": "car",
      "status": "Good",
      "time": "2018-11-02T03:26:34.350Z"
    },
    {
      "name": "Truck",
      "status": "Ok",
      "time": "2018-11-02T03:27:23.038Z"
    },
    {
      "name": "Bike",
      "status": "NEW",
      "time": "2018-11-02T13:08:49.175Z"
    }
  ]
}

在单击时，我从组件内部运行以下命令：

     <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();
    }
}

我尝试设置超时并将没有成功的searchbarElem声明为ERROR TypeError: Cannot read property 'nativeElement' of undefined。

我知道这可以在Angular 2 / Ionic 2中使用，但现在不行了。有什么变化吗？还是影子圆顶影响了事物？任何帮助将不胜感激，谢谢。

Answer 1

您应将Agent Dollars Team Dollars 1000 3300与ViewChild元数据属性一起使用：

read: ElementRef

并使用@ViewChild("searchbarElem", { read: ElementRef }) private searchbarElem: ElementRef;访问HTMLElement：

this.searchbarElem.nativeElement

有关演示，请参见this stackblitz（请参见“主页”中的代码）。

Answer 2

对于使用 Angular 8 和Ionic 4的用户，可以设置标志static: false，而不会攻击本机元素。

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

请参阅此Stackoverflow thread：

Answer 3

在我的例子中，我需要作为 ion-input 子元素的原生 HTML 输入元素用于需要原生输入元素的谷歌地图自动完成。

解析 getInputElement() 从承诺返回这个

<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 ...
});

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

3 个答案: