如何将按钮重点放在离子搜索栏点击

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