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

时间:2019-03-27 16:35:03

标签: angular observable routerlink ngoninit

仅作澄清。这个有角度的应用程序正在向视图中填充数据,但是当我从一个组件导航到另一个组件时,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中共享。一些帮助表示赞赏。

1 个答案:

答案 0 :(得分: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();
     }
 }