如果 valueChanges，我该如何使用？

Question

我的应用程序中有一个聊天部分，scrollBottomOnInit() 函数有效，但仅适用于发件人。

问题 1: 我想在 valueChanges() 时 scrollBottomOnInit() 函数工作我该如何修复？

问题 2：当用户离开此页面时，valueChanges() 是否继续工作？

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
import * as firebase from 'firebase/app';
import { IonContent } from '@ionic/angular';
@Component({
  selector: 'app-group-chat',
  templateUrl: './group-chat.page.html',
  styleUrls: ['./group-chat.page.scss'],
})
export class GroupChatPage implements OnInit {
  @ViewChild(IonContent, {read: IonContent, static: false}) content: IonContent;
  messages: Observable<any[]>;
  myUid : any
  message :string = ""
  campId : any
  name : any
  constructor(private route: ActivatedRoute,private db : AngularFireDatabase,private NavCtrl : NavController) { }

  ngOnInit() {
    this.route.paramMap.subscribe(paramMap=>{
      this.campId=paramMap.get('campId')
      this.myUid = firebase.auth().currentUser.uid
      this.db.database.ref("/users/"+this.myUid).once("value",c=>{this.name = c.child("name").val()})
//this.message (receive message)
      this.messages = this.db.list("/forms/"+this.campId+"/chat/").valueChanges();// if valueChanges then call scrollBottomOnInit()
    })
  }
  sendMessage(){
    
    var chatId =this.db.createPushId();
    this.db.object("/forms/"+this.campId+"/chat/"+chatId).update({
      name : this.name,
      message : this.message,
      who:this.myUid
    }).then(a=>this.message="")       
        
     
 this.scrollToBottomOnInit(); // this is work but only for sender  
}
scrollToBottomOnInit() {
  setTimeout(() => {
      if (this.content.scrollToBottom) {
          this.content.scrollToBottom(400);
      }
  }, 500);
}

}

编辑：我使用了异步，所以我需要退订吗？

这是我的模板 :

<ion-header>
  <ion-toolbar>
    <ion-title>campChat</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row *ngFor="let item of messages | async">
      <ion-col size="9" *ngIf="item.who!==myUid" class="message other-message">
        <span>{{item.message}}</span>
      </ion-col>
  
      <ion-col offset="3" size="9" *ngIf="item.who===myUid" class="message my-message">
        <span>{{item.message}}</span>
      </ion-col>
    </ion-row>
  </ion-grid>
  </ion-content>
  
  <ion-footer >
    <ion-toolbar>
      <ion-item>
        <ion-input [(ngModel)]="message">
  
        </ion-input>
        <ion-button slot="end" (click)="sendMessage()">
          <ion-icon name="send-outline" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-item>
    </ion-toolbar>
  </ion-footer>

Answer 1

firebase 的 valueChanges 方法是一个可观察到的 return 当前值，基于您的查询，在您的实时数据库中。您将需要订阅它以获取其内容（如果它尚未在模板中使用异步管道完成）。
您可以向您的 observable 添加一个 tap 运算符。每次 valueChanges 发出一个新值时，它都会执行 tap operator:

中的内容

...
this.messages = this.db.list("/forms/"+this.campId+"/chat/")
  .valueChanges()
  .pipe(
    tap(() => scrollToBottomOnInit()) 
  );
...

关于你的第二个问题，当你的用户离开页面时，如果你让订阅打开，它会继续发出值。您需要取消订阅以避免内存泄漏。
如果您在模板中使用管道异步，angular 会为您完成。如果你在你的组件中订阅了它，请使用 ngOnDestroy 方法取消订阅：

messagesSubscription: Subscription;

ngOnInit() {
  ...
  this.messagesSubscription = this messages.subscribe();
}

ngOnDestroy() {
    this.messagesSubscription.unsubscribe();
}
...

如果 valueChanges，我该如何使用？

How can i use if valueChanges?

javascript

angular

firebase

google-cloud-firestore

ionic4