Angular 7 / ionic 4 Mutation Observer не находит элемент DOM

Question

Я хочу прокрутить вниз до нижней части представления, когда внутри DOM есть новый элемент, и он не распознается.

<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>

component.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,
    });
  }

Я никогда не вижу here в консоли

любая помощь с благодарностью, спасибо

Answer 1

по этой ссылке https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/ наблюдатель-мутант должен отслеживать shadowRoot, а не сам элемент попробуйте изменить код, как показано ниже

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