ngOnInit 中的服务订阅被调用一次并且不会在路由更改时保持填充

Question

澄清一下。这个 angular 应用程序正在将数据填充到视图中，但是当我从一个组件导航到另一个组件时，ngOnInit 生命周期挂钩似乎没有被调用，因此这意味着视图上的列表仍然是空的。当我按 f5（刷新）时，我所在的任何页面上的数据都会被填充，这意味着该服务工作正常。会不会是生命周期钩子的问题？

假设我在文件中有以下集合 product.service.ts

 export class ProductsService {

  private productsCollection:AngularFirestoreCollection<Product>;
  private products:Observable<Product[]>;

  constructor(private afs:AngularFirestore) { 
    //Code was removed from here as it is beyond the scope of the problem
    //this.products is getting populated here successfully 
  }

 getProducts(){
   return this.products;
 }
}

我订阅了两个独立组件的方法，如下所示（使用下面完全相同的代码）

constructor(private productService:ProductsService) { }

      ngOnInit() {
        this.productService.getProducts().subscribe(
          products => {
              this.products = products;
          });

因此，假设 componentA 和 componentB 都有此代码，则加载时应在两个组件上填充列表。当我在组件中键入 URL 时，列表被填充，但是当我使用 routerlinks 并且数据未被填充时，就像调用新路由时没有触发 ngOnit 一样。两个视图都显示了列表，但是当我使用 routerlink 而不是写入地址或刷新页面时，它们不会被填充。该服务作为提供商在 app.module.ts 中共享。一些帮助表示赞赏。

Answer 1

使用行为主体而不是可观察对象。行为主题是一个热可观察对象，它允许任何订阅者拉取已经推送给它的现有数据。与行为主题的一个区别是您使用 .next 方法推送数据。 BehaviorSubjects 在初始化时也需要传递一个初始值，在这种情况下我传递了 null，因为我假设你的构造函数做了一些事情来获取所需的数据。下面的代码示例：

 export class ProductsService {

     private productsCollection:AngularFirestoreCollection<Product>;
     private products:BehaviorSubject<Product[]> = new BehaviorSubject(null);

     constructor(private afs:AngularFirestore) { 
       //code here to set products
       this.products.next('data to set products here')
     }

     getProducts(){
        return this.products.asObservable();
     }
 }

ngOnInit 中的服务订阅被调用一次并且不会在路由更改时保持填充

Service subscription in ngOnInit gets called once and does not stay populated on route change

observable

routerlink

ngoninit

angular