Angular2实现消息发送/页面打开时自动滚动至底部及会话底部显示

Got it, let's tackle these two scroll behaviors for your Angular message chat module. Here's a step-by-step solution that works reliably:

Step 1: Prepare the Template #

First, add a template reference variable to your message list container (the <ul> element) so we can access it in the component:

<ul #messageContainer>
  <li *ngFor="let reply of message_show.messages">
    <img [src]="reply.from_user_image || '../assets/images/msg.png'"/>
    <p><b>{{reply.name}} </b> <span> {{reply.updated_at | date:'dd.MM.yyyy'}} - {{reply.updated_at | date:'h:mm'}}</span></p>
    <!-- Rest of your message content -->
  </li>
</ul>

Also, make sure your container has proper CSS to enable scrolling:

#messageContainer {
  height: 600px; /* Adjust to your desired height */
  overflow-y: auto;
  list-style: none;
  padding: 1rem;
}

Step 2: Component Logic #

In your Angular component, we'll use ViewChild to grab the container element, then implement methods to handle scrolling on initialization and after sending messages:

import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-message-session',
  templateUrl: './message-session.component.html',
  styleUrls: ['./message-session.component.css']
})
export class MessageSessionComponent implements AfterViewInit {
  message_show = { messages: [] }; // Replace with your actual message data

  @ViewChild('messageContainer') private messageContainer!: ElementRef;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    // Scroll to bottom when the component first loads
    // If messages are loaded asynchronously, call this after data is fetched
    this.scrollToBottom();
  }

  // Example send message method
  sendMessage(newMessage: any): void {
    // Add your message sending logic here (API call, local array push)
    this.message_show.messages.push(newMessage);

    // Ensure DOM updates before scrolling
    this.cdr.detectChanges();
    this.scrollToBottom();

    // Alternative for simple cases: use setTimeout to wait for DOM update
    // setTimeout(() => this.scrollToBottom(), 0);
  }

  // Helper method to handle scrolling
  private scrollToBottom(): void {
    const container = this.messageContainer.nativeElement;
    container.scrollTop = container.scrollHeight;
  }

  // If loading messages from an API, call scroll after data is received
  loadMessages(): void {
    // Example API call
    // this.messageService.getMessages().subscribe(messages => {
    //   this.message_show.messages = messages;
    //   this.cdr.detectChanges();
    //   this.scrollToBottom();
    // });
  }
}

Key Notes: #

• Initial Scroll: Use ngAfterViewInit to trigger scroll once the view is ready. If your messages load asynchronously (from an API), call scrollToBottom() inside the subscription callback after assigning the messages.
• Post-Send Scroll: After adding a new message, we use ChangeDetectorRef.detectChanges() to force Angular to update the DOM immediately before scrolling. This ensures the new message is rendered before we calculate the scroll position.
• Scroll Logic: Setting scrollTop to scrollHeight of the container will always jump to the bottom, since scrollHeight is the total height of all content inside the container.

内容的提问来源于stack exchange，提问作者Bhrungarajni