Question

仅作澄清。这个有角度的应用程序正在向视图中填充数据，但是当我从一个组件导航到另一个组件时，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中的服务订阅被调用一次，并且在路由更改时不会保持填充

1 个答案: