javascript – Angular：无法向下滚动到元素的底部

我一直推迟修复这个错误,我已经有一段时间了.我有以下聊天窗口：

我显示消息的窗口是一个单独的组件(chat-window.component.ts).我想用ngOnChanges滚动到底部.

当我们收到来自父组件的消息的对话时,通过异步请求从服务器接收消息,我们想要滚动到窗口元素的底部.我们通过在ngOnChanges生命周期钩子中调用类的this.scrollToBottom()方法来完成此操作.

调用此.scrollToBottom,但它不会滚动到元素的底部.有人能看出原因吗？

chat-window.component.ts：在ngOnchanges中我们在调用this.scrollToBottom()之前做了一些同步的事情.

export class ChatBoxWindowComponent implements OnChanges, OnInit, AfterViewChecked {

  @Input('conversation') conversation;
  @ViewChild('window') window;

  constructor() { }

  ngOnChanges() {
    // If the date separators have already been added once, we avoid doing it a second time
    const existingDateObj = this.conversation.messages.findindex((item, i) => item.dateObj);

    if (existingDateObj === -1) {
      this.conversation.messages.forEach( (item, index, array) => {
        if (index !== 0) {
          const date1 = new Date(array[index - 1].date);
          const date2 = new Date(item.date);

          if (date2.getDate() !== date1.getDate() || date2.getMonth() !== date1.getMonth()) {
            this.conversation.messages.splice(index, 0, {date: date2, dateObj: true});
            console.log(this.conversation.messages.length);
          }
        }
      });
    }

    this.scrollToBottom();
  }

  ngOnInit() {
  }

  ngAfterViewChecked() {
  }

  isItMyMsg(msg) {
    return msg.from._id === this.conversation.otherUser.userId;
  }

  scrollToBottom() {
    try {
      console.log('scrollToBottom called');
      this.window.nativeElement.top = this.window.nativeElement.scrollHeight;
    } catch (err) {}
  }
}

聊天window.component.html

<div #window class="window">
  <ng-container *ngFor="let message of conversation.messages">
    <div class="date-container" *ngIf="!message.msg; else windowMsg">
      <p class="date">{{message.date | amDateFormat:'LL'}}</p>
    </div>
    <ng-template #windowMsg>
      <p
        class="window__message"
        [ngClass]="{
    'window__message--left': isItMyMsg(message),
    'window__message--right': !isItMyMsg(message)
    }"
      >
        {{message.msg}}
      </p>
    </ng-template>
  </ng-container>
</div>

解决方法:

滚动不起作用,因为当您调用scrollToBottom时,尚未呈现消息列表.要在显示消息后滚动,请在消息容器上设置template reference variable(例如#messageContainer)：

<ng-container #messageContainer *ngFor="let message of conversation.messages">
  ...
</ng-container>

在代码中,您可以使用ViewChildren访问这些元素,并在触发QueryList.changes事件时滚动窗口：

@ViewChildren("messageContainer") messageContainers: QueryList<ElementRef>;

ngAfterViewInit() {
  this.scrollToBottom(); // For messsages already present
  this.messageContainers.changes.subscribe((list: QueryList<ElementRef>) => {
    this.scrollToBottom(); // For messages added later
  });
}