Question

我只有两个组件，并且该应用程序已连接到Firebase（firestore）。当我导航时，在ngOnInit中调用的数据会消失，并且仅当我插入一个帖子或一个用户（窗体）时才会再次出现。有人可以帮我吗？

路线：

const routes: Routes = [
  { path: "", component: HomeComponent, pathMatch: "full" },
  {
    path: "admin",
    component: AdminComponent
  },
  {
    path: "**",
    redirectTo: "/",
    pathMatch: "full"
  }
];

服务

itemsCollection: AngularFirestoreCollection<Post>;
  items: Observable<Post[]>;
  itemDoc: AngularFirestoreDocument<Post>;

  constructor(public afs: AngularFirestore) {


    this.itemsCollection = this.afs.collection('posts', ref =>
      ref.orderBy('date', 'desc')
    );

    this.items = this.itemsCollection.snapshotChanges().map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as Post;
        data.id = a.payload.doc.id;
        return data;
      });
    });
  }

  getItems() {
    return this.items;
  }

其组件和订阅

 private postService: PostsService,

  ) {}

  ngOnInit() {
    this.postService.getItems().subscribe(data => {
      this.postInput = data;
    });

  }

Answer 1

在您的服务中创建帖子属性。然后订阅您的服务中的可观察对象，将帖子设置为您从firebase获得的内容。也不要在构造函数内部编写代码，而是将其包装在函数中，并在OnInit中的适当组件中使用它。最后创建一个主题，向其发送当前帖子，并在所需组件内的onInit中订阅它们

posts = Post[]
postsChanged = new Subject<Post[]>()  

getItems(){
    this.itemsCollection.snapshotChanges().map(changes => {
      return changes.map(a => {
        return {
          id: a.payload.doc.id,
          ...a.payload.doc.data() 
        }
      }).subscribe(posts => {
           this.posts = posts
           this.postsChanged.next([...this.posts])
        })
   }

Answer 2

基于Kase44的提示，我设法找到了一个解决方案：将ID的捕获包装在一个函数中，在服务构造函数和ngOnInit（）中将其称为：

服务

export class UsersService {

  usersCollection: AngularFirestoreCollection<Users>;
  userDoc: AngularFirestoreDocument<Users>;
  users: Observable<Users[]>;
  user: Observable<Users>;

  constructor(public afs: AngularFirestore) {

    this.usersCollection = this.afs.collection('employees', ref =>
      ref.orderBy('name', 'asc')
    );
this.getUserID();

  }

getUserID(){
  this.users = this.usersCollection.snapshotChanges().map(changes => {
    return changes.map(a => {
      const data = a.payload.doc.data() as Users;
      data.id = a.payload.doc.id;
      return data;
    });
  });
}

以及组件：

     ngOnInit() {
    this.userService.getUsers().subscribe(data => {
      this.emp = data;

    });
    this.userService.getUserID();
  }

角度：从API检索的数据仅在首次启动应用程序时显示

2 个答案: