angular - 更改路线后数据消失

Question

更改路线后我的数据丢失了。

场景:

CommentComponent(显示数据)-> ChangeRoute-> CommentComponent(未显示数据)

数据只在第一次加载时显示，但每当我改变路线时它就消失了。

我发现这个问题看起来与我的案例/问题相似: No data for FireStore after use of routerlink

但是评论/答案都没有帮助。所以我决定提出这个问题。

COMPONENT.HTML: comment.component.html:

<ng-template #noComments>
  <h1>No comment yet.</h1>
</ng-template>
<div *ngIf="comments?.length > 0; else noComments">
  <h1 style="margin-bottom: 3.5vh;">Comments</h1>
  <ul *ngFor="let comment of comments">
      <li>
        <mat-card>
          <h3>{{comment.name}}</h3>
          <p>{{comment.comment}}</p>
        </mat-card>
      </li>
    </ul>
</div>

COMPONENT.TypeScript: comment.component.ts:

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

import { CommentService } from '../services/comment.service';
import { Comment } from '../models/comment';

@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {

  comments: Comment[];

  constructor(private commentService: CommentService) {
  }

  ngOnInit() {
    this.commentService.getComments().subscribe(comments => {
      this.comments = comments;
    });
  }

}

服务:comments.service.ts:

import { Injectable } from '@angular/core';
import { Comment } from '../models/comment';

import { Observable } from 'rxjs/observable';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';

@Injectable()
export class CommentService {

  commentsCollection: AngularFirestoreCollection<Comment>;
  comments: Observable<Comment[]>;

  constructor(public afs: AngularFirestore) {
    this.commentsCollection = this.afs.collection('comments');
    this.comments = this.commentsCollection.valueChanges();
  }

  getComments() {
    return this.comments;
  }

}

模型:comments.ts:

export interface Comment {
    name: string;
    comment: string;
}

[已解决]

方法如下:

在 comment.service.ts 中，做一些事情:

  constructor(public afs: AngularFirestore) {
    this.commentsCollection = this.afs.collection('comments');
    this.comments = this.commentsCollection.valueChanges();
  }

  getComments() {
    return this.comments;
  }

对此:

  constructor(public afs: AngularFirestore) {
  }

  getComments() {
    this.commentsCollection = this.afs.collection('comments');
    return this.comments = this.commentsCollection.valueChanges();
  }

Answer 1

在我看来，问题在于您最初是在服务构造函数上设置注释，这意味着它只会发生一次。因为这很可能是一个 http 调用，observable 将在返回后立即完成。在组件中更改路由并再次导航到它后不会重新启动可观察对象，因此订阅将永远不会收到任何值。 Observable 已经完成。

我相信，如果您将构造函数中的代码移至 getComments() 方法，它应该可以解决您的问题。