使用 Angular 自动清除 ShadowDOM 中元素的输入?

Automatically clear input from an element within ShadowDOM using Angular?

我正在使用 Ionic 创建自动完成输入,但浏览器使用无效数据自动填充输入时遇到问题。我需要能够使用 Angular 清除它。

PS:我加了automcomplete="off"但是没有被尊重

下面是 Ionic 的 ion-input 的 HTML,我试图将其作为目标:

<ion-input #inputElem
           [autocomplete]="enableBrowserAutoComplete ? 'on' : 'off'"
           [name]="name"
           (keyup)="getItems($event)"
           (tap)="handleTap($event)"
           [(ngModel)]="keyword"
           (ngModelChange)="updateModel($event)"
           (ionFocus)="onFocus($event)"
           (ionBlur)="onBlur($event)"></ion-input>

在我的组件中,我有 updateModel() 功能,它检查输入的变化并在输入无效时将其清除。但是,angular 的更改检测不会注意到浏览器是否自动填充。

或者,如果您在控制台中操作它:

$('input.searchbar-input.sc-ion-searchbar-md').value = 'J'

因此,如果没有有效的选择,我正在尝试找到一种清除关键字的方法。我最成功的尝试是使用OnChangesDoCheckAfterViewCheck等生命周期钩子,但清除关键字是不够的。我必须清除阴影 dom 内的输入,因为该值尚未传播。所以在函数中我必须使用承诺来获取元素(我怀疑这是真正的问题)。其中 "works" 只要我在生命周期函数内保留一个断点。第二个我删除断点浏览器选项卡完全冻结。

@ViewChild(
  'inputElem',
  {
    read:   ElementRef,
    static: false
  }
)
private inputElem:ElementRef;

[..]

ngOnChanges():void {
    if (!this.hasFocus) {
      if (this.clearInvalidInput && this.selected === null) {
        if (this.keyword !== '') {
          this.keyword = '';
        }

        if (this.inputElem && this.inputElem.nativeElement) {
          this.inputElem.nativeElement.getInputElement().then(
              (element) => {
                if (element.value !== '') {
                  element.value = '';
                }
              }
          );
        }
     }
   }
}

我已经发布了一个变通方法作为答案,但我将其保持打开状态,因为它感觉很老套。

我找到了解决方法,但这不是首选解决方案。

ngDoCheck() {
  if (this.inputElem && this.inputElem.nativeElement) {
    if (this.inputElem.nativeElement.children && this.inputElem.nativeElement.children.length !== 0) {
      if (this.inputElem.nativeElement.children[0].children && this.inputElem.nativeElement.children[0].children.length !== 0) {
        if (this.inputElem.nativeElement.children[0].children[0].value) {
          this.inputElem.nativeElement.children[0].children[0].value = '';
        }
      }
    }
  }
}