ion-searchbar具有取消图标，而不是取消文本ionic 3

Question

我需要在ion-searchbar旁边有一个Cancel图标。现在，在ion-searchbar旁边有“ Cancel”（取消）文本。文字是由我提供的，现在我想用图片替换文字。

<ion-searchbar  name="doSearch" (search)="doSearch($event)" [(ngModel)]="searchFilter" [showCancelButton]="true" cancelButtonText="Cancel" placeholder="Search" (ionCancel)="searchCancel($event)" (ionInput)="onInput($event)" (ionBlur)="onInputBlur()" (ionFocus)="onInputFocus()" (ionClear)="onInputClear($event)" >

我试图删除“取消”按钮，还尝试获取元素并插入类名。

  var element = document.getElementById(".searchbar-ios .searchbar-ios-cancel .button-inner");
  element.classList.add("fa fa-angle-down fa-2x down-arrow");

它引发错误，指出TypeError: null is not an object (evaluating 'element.classList')

能否让我知道要获得“取消”图标，而不是在ion-searchbar中取消文本。

Answer 1

从[showCancelButton]="true" cancelButtonText="Cancel"中删除ion-searchbar。默认情况下，您将获得“删除”图标按钮。