Angular实现文本框自动滚动显示最后一条

最新推荐文章于 2024-08-21 14:00:00 发布

CodeUnaVia

最新推荐文章于 2024-08-21 14:00:00 发布

阅读量1k

点赞数

分类专栏： Web 文章标签： angular2 html typescript

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在文本框作为聊天框或者输出日志时，需求为在div中自动显示最后一条：

html代码：

<div class="logger" #scroll>
  <div *ngIf="messageService.messages.length">
    <h6>Log:</h6>
    <div *ngFor='let message of messageService.messages'>{{message}}</div>
  </div>
</div>

component组件typescript代码：

import { Component, OnInit } from '@angular/core';
import { MessageService } from 'app/core/services/message.service';
import { AfterViewChecked, ViewChild} from '@angular/core';

@Component({
  selector: 'ow-logger',
  templateUrl: './logger.component.html',
  styleUrls: ['./logger.component.scss']
})
export class LoggerComponent implements OnInit, AfterViewChecked {

  @ViewChild('scroll') myScrollContainer;

  constructor(private messageService: MessageService) {
  }

  scrollToBottom() {
    this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
  }

  ngAfterViewChecked() {
    this.scrollToBottom();
  }

  ngOnInit() {
  }
}

参考博客：https://segmentfault.com/a/1190000010434571