Angular 7/ionic 4 Mutation Observer 未找到 DOM 元素

Question

当 DOM 中存在新元素且无法识别该元素时，我想向下滚动到 View 底部。

<ion-content #content>
  <ng-container *ngIf="messages$.length; else loading">
    <ion-grid>
      <ion-row *ngFor="let message of messages$">
        <ion-col
          *ngIf="id === message.id"
          size="9"
          offset="3"
          class="message my-message"
          [ngStyle]="{ background: message.isUrgent ? 'var(--ion-color-danger)' : 'var(--ion-color-primary)' }"
        >
// hiding  more divs for brevity
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>

组件.ts

  private mutationObserver: MutationObserver;

  @ViewChild(IonContent) private content: IonContent;
  @ViewChild(IonCol, { read: ElementRef }) private chatList: ElementRef
//note, above I have tried, IonList/Row/Col/Grid

  public ngAfterViewInit(): void {
    this.mutationObserver = new MutationObserver((mutations: MutationRecord[]): void => {
      console.log('here', mutations);
      this.content.scrollToBottom();
    });
    this.mutationObserver.observe(this.chatList.nativeElement, {
      childList: true,
    });
  }

我在控制台中从未看到此处

非常感谢任何帮助，谢谢

Answer 1

根据此链接https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/突变观察者需要监视shadowRoot而不是元素本身尝试更改如下代码

 this.mutationObserver.observe(this.chatList.nativeElement.shadowRoot , {
      childList: true,
    });