Ionic 4+ Angular：离子搜索栏和工具栏中的搜索图标未与onfocus-event对齐

Question

我将离子搜索栏放入了离子工具栏中。在您单击搜索栏并激活方法（ionFocus）=“ onFocus（）”之前，一切看起来都很好。因为这样，工具栏中的按钮消失了，搜索栏获得了完整宽度，从而搜索图标不会向左移动，而是保持在原处。（图2）

只要在搜索栏中输入内容，搜索图标就会将其自身定位在正确位置的左侧，如您在最后第三张图片中所见。

如果我不使用（ionFocus）方法，则会正确移动搜索图标。但是，我需要（ionFocus）方法，我不得不寻找解决方案。

我非常感谢您的帮助！

<ion-searchbar 
  placeholder="Suche im Wiki" 
  inputmode="text" type="text" 
  [(ngModel)]="searchTerm" mode="ios"
  (ionChange)="onSearchChange($event)" 
  (ionCancel)="cancelSearch()" 
  (ionBlur)="onBlur()" 
  (ionFocus)="onFokus()"
  showCancelButton="focus" 
  [debounce]="250" 
  animated="true">
</ion-searchbar>

图1：默认外观

图2：这是我在搜索栏中单击时的工具栏外观。

图3：这是我在搜索栏中键入内容时工具栏的外观。您可以看到，只要键入内容，搜索图标就会向左移到正确的位置。

Answer 1

我们在这里结伴：在ts文件广告中这些：

defaultBar:boolean=false;

然后添加这两种方法：

hideDefaultBar(){
  this.defaultBar =false;
}

showDefaultBar(){
  this.defaultBar =true;
  this.searchTerm = "";
}

现在在html部分：

在栏的第一个状态中，旁边有2个图标，在其容器中添加此：

*ngIf="defaultBar == true"

在里面：

<ion-searchbar 
  placeholder="Suche im Wiki" 
  mode="ios"
  (click)="hideDefaultBar()">
</ion-searchbar>

以及第二个容器，您将添加以下内容：

<ion-searchbar 
  *ngIf="defaultBar == false"
  placeholder="Suche im Wiki" 
  inputmode="text" type="text" 
  [(ngModel)]="searchTerm" mode="ios"
  (ionChange)="onSearchChange($event)" 
  (ionCancel)="showDefaultBar()" 
  (ionBlur)="showDefaultBar()"
  showCancelButton="focus" 
  [debounce]="250" 
  animated="true">
</ion-searchbar>

进行测试，并告诉我是否存在任何问题。