{IONIC / ANGULAR} 发送/接收新消息会将我带到聊天应用程序的屏幕顶部答案

【问题标题】：{IONIC / ANGULAR} Sending/receiving a new message takes me to top of the screen on chat app{IONIC / ANGULAR} 发送/接收新消息会将我带到聊天应用程序的屏幕顶部
【发布时间】：2023-02-14 06:13:14
【问题描述】：

我正在尝试在应用程序中使用 Angular Firestore 和 Firebase 实现聊天功能，我使用可观察对象获取所有消息。获取所有消息工作正常，但只要我发送新消息或在聊天中收到消息，屏幕就会一直向上并锁定在那里。

这是我的聊天服务中用于获取消息的代码：

  getMessages(id){
    return this.afs.collection<any>(`chats/${id}/messages`,   ref => ref.orderBy('createdAt','asc').limitToLast(20)).valueChanges()
  }

这是TS： getMessages(){this.user$ = this.cs.getMessages(this.chatID)}

它使用异步管道显示在 HTML 中：

<ion-row class="ion-align-items-center" *ngFor="let message of user$ | async;">
....
</ion-row>

This is how it looks in the app when sending a message

我做了一个功能，在进入视图或发送消息时向下滚动视图：

  sendChatMessage(msg){
    return this.afs.collection(`chats/${this.chatID}/messages`).add({
      msg: msg,
      from: this.uid,
      fromName: this.myName,
      createdAt: firebase.firestore.FieldValue.serverTimestamp()
      
    })
  }


  submit() {
    this.sendChatMessage(this.newMsg).then(()=>{
      this.newMsg = '';
     this.scrollToBottom(100,100)
    });
  }


  scrollToBottom(delay, time){
    setTimeout(() => {
      this.myContent.scrollToBottom(time);
   }, delay);
  }

This is what it looks like with the scrollToBottom function

我想要它，以便视图停留在用户提交消息时所在的位置，或者它只向下滚动到最新消息而不先向上滚动。任何想法如何解决这一问题？

This is also what it looks like when receiving message from others(no scrolldown)

这使得新消息的接收变得一团糟，因为如果你在聊天中滚动并收到一条新消息，用户将被自动传送到屏幕顶部。

我很感激我能得到的所有帮助，因为我已经坚持了几天了。

我试过改变我从 Firebase 获取消息的方式（删除 20 的限制），从 valuechanges 等改变。我不确定是什么导致了行为，这就是为什么我在寻找修复时迷失了方向。

我也试过锁定视图，但它只适用于一条消息，然后它会回到以前的行为。

【问题讨论】：

标签： html angular typescript angularfire ionic5

【解决方案1】：

你的 CSS 怎么样？在我看来，您有一些 CSS 可以激活向上滚动。请尝试从消息容器中更改您的 CSS，如下所示：

.messages-container {
    width: 100%;
    display: flex;
    min-height: 100%;        
    position: relative;        
    overflow: hidden;
    margin: 0 auto;
}

【讨论】：