Question

我的应用程序将显示消息列表（带滚动）。当用户添加新消息时，页面需要滚动到消息列表的底部。将新消息添加到消息列表后立即调用scrollToBottom（）是否正确？或者它会给出时间问题？视图是否已经更新（包含新消息），所以scrollHeight会是正确的吗？或者用其他方式来表达我的问题：有没有办法知道/确保在模型改变时视图完全更新。

查看（messaging.html）：

<div class=”height: 100%; scroll: auto”>
  <div class="message" *ngFor="#message of messages">
    ...
  </div>
</div

组件：

import {Component, ViewChild, ElementRef} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';

@Component({
  selector: 'messaging',
  templateUrl: './messaging.html',
  styleUrls: ['./messaging.css'],
  directives: [CORE_DIRECTIVES]
})
export class Messaging {
  private messages:Message[] = [];

  @ViewChild('messagingscroll') private messageScroll: ElementRef;

  constructor() {
  }

  sendMessage(message:string, element) {
    let msg:Message = new Message(message);

    // Add msg
    this.messages.push(msg);

    // Scroll to bottom
    this.scrollToBottom();

    // Set back empty
    element.value = '';
  }

  scrollToBottom(): void {
    this.messageScroll.nativeElement.scrollTop = this.messageScroll.nativeElement.scrollHeight;
  }
}

Answer 1

如果要在视图完全加载时调用函数，则可以调用angular2的默认生命周期钩子，即ngAfterViewinit()

请点击此处了解详情https://angular.io/docs/ts/latest/api/core/AfterViewInit-interface.html

根据官员的说法

实施此界面，以便在您的组件视图完全初始化后收到通知。

因为您需要在视图更改后每次调用函数，所以您可以使用ngAfterViewchecked。

实施此界面，以便在每次检查组件的视图后收到通知。

点击此处https://angular.io/docs/ts/latest/api/core/AfterViewChecked-interface.html

在Angular2

1 个答案: