Question

我正在尝试将ion-searchbar重点放在按钮点击上，但它无效。这是我的代码

打字稿

@ViewChild('search') search:ElementRef;

focusButton(){
       console.log(this.search);   //Searchbar {_config: Config, _elementRef: ElementRef, _renderer: RendererAdapter, _componentName: "searchbar", _mode: "md", …}
       console.log(this.search.nativeElement); //  null
       this.search.nativeElement.focus();      //  Cannot read property 'focus' of undefined
        this.search.nativeElement.setFocus();      // Cannot read property 'setFocus' of undefined

}

HTML

<ion-searchbar #search (ionCancel)="cancelSearch($event)" [showCancelButton]="true" [(ngModel)]="artists"></ion-searchbar>
        <ion-buttons end>
            <button [hidden]="showSearch" (click)="(showSearch = !showSearch) && focusButton()" ion-button icon-only>
              <ion-icon  name="search"></ion-icon>
            </button>
        </ion-buttons>

控制台输出位于带代码的注释中。

Answer 1

希望您可以使用以下代码执行此操作。只需使用setTimeout进行尝试，如下所示。

html的

<ion-searchbar #search (ionCancel)="cancelSearch($event)" 
[showCancelButton]="true" [(ngModel)]="artists"></ion-searchbar>

<ion-buttons end>
   <button [hidden]="showSearch" (click)="(showSearch = !showSearch) && focusButton()" ion-button icon-only>
    <ion-icon  name="search"></ion-icon>
  </button>
</ion-buttons>

.TS

@ViewChild('search') search : any;

focusButton(): void {
    setTimeout(() => {
      this.search.setFocus();
    }, 500);
  }

Answer 2

在模板中添加引用

<input #inputEl> 或<ion-searchbar #inputEl>用作 input

将ViewChild导入 .ts 的顶部，并在组件 class

中定义一个引用变量

import { ViewChild } from '@angular/core';
@ViewChild('inputEl') inputElRef;

使用nativeElement访问focus()功能

this.inputElRef.nativeElement.focus();

Answer 3

对于使用 Angular 8 和Ionic 4的用户，可以设置标志static: false，该标志将考虑涉及*ngIf并例如隐藏搜索栏。 *ngIf再次显示视觉组件（例如ion-searchbar）

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

  constructor() { }

  public setSearchbarVisible(isVisible) {
    this.isSearchbarOpened = isVisible;
    if (isVisible) {
      setTimeout(() => {
        this.searchInput.setFocus();
    }, 100);
    }
  }

将类型添加到searchInput还将有助于了解方法和属性，例如setFocus()。那是整洁的代码，不敢触摸包装的本机元素。

Answer 4

1-）导入IonSearchBar元素

import { IonSearchbar} from '@ionic/angular';

2-）为IonSearchBar创建ViewChild

@ViewChild(IonSearchbar) myInput: IonSearchbar;

3-）设置超时焦点

setTimeout(() => { this.myInput.setFocus(); }, 150);

-

此处打开请求功能： ion-searchbar autofocus #17745

最诚挚的问候。

如何在按钮点击上关注ion-searchbar

4 个答案: