Angular 离子4/角度-离子输入-自定义清除输入按钮

我有一个搜索输入来显示项目列表。我想添加一个自定义的清除输入按钮。也就是说，我想替换离子输入中现有的clearInput以使用自定义按钮

.ts:

.html

清楚的

---

这不起作用，但离子输入clearInput确实起作用：//

如果引用离子输入会怎么样

<div>
  <span (click)="refIonInput.clearField()">CLEAR</span>
   <ion-input #refIonInput (keyup)="filterList($event.target.value)" type="text" [ngModel]="inputText"> 
   </ion-input>
</div>

清楚的

Awesome，可以用：CLEAR完成

<div>
  <span (click)="clearField()">CLEAR</span>
   <ion-input (keyup)="filterList($event.target.value)" type="text" [ngModel]="inputText"></ion-input>
</div>

<div>
  <span (click)="refIonInput.clearField()">CLEAR</span>
   <ion-input #refIonInput (keyup)="filterList($event.target.value)" type="text" [ngModel]="inputText"> 
   </ion-input>
</div>