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