Question

我有一个包含多个组件的页面。我想从一个json文件中获取数据，并将该数据传递到父组件的不同组件中。目前，我已通过服务传递数据。下面是代码：在GalleryService中

export class GallerysharedService {
    private productListUrl:string = '/assets/js/productlist.json';
    constructor(private _http: HttpClient) {}
    getProductList():Observable<any> {  
        return this._http.get(this.productListUrl);
    }
}

并且在product.component.ts文件中，添加了以下代码：

export class ProductComponent implements OnInit {
    constructor( private dataService:GallerysharedService ) {}
    ngOnInit() {
        this.dataService.getProductList().subscribe(data => {
            console.log(data);
        });
    }
}

此外，在Image.component.ts文件中，添加了以下代码：

export class ImageComponent implements OnInit {
    constructor( private dataService:GallerysharedService ) {}
    ngOnInit() {
        this.dataService.getProductList().subscribe(data => {
            console.log(data);
        });
    }
}

在这里，当页面被加载时，json被调用两次。因此，我们如何才能在一个调用中获得数据，即将所有数据存储在产品页面中，然后将数据传递给其他组件（图像组件，产品详细信息页面等）。有人可以帮我吗？还有其他方法可以实现这一目标。请提出建议。

Answer 1

您可以使用BehaviorSubject实现这一目标。

export class GallerysharedService {
    ProductList: any;
    private productListUrl:string = '/assets/js/productlist.json';
    constructor(private _http: HttpClient) {

    }
    getProductList():Observable {  
        if(!this.ProductList){
            return this._http.get(this.productListUrl).map((data)=>{
               return this.ProductList = data;
            });
        }else {
            return Of(this.ProductList);
        }
    }
}

在其他组件中，您可以使用相同的代码访问该服务。

在角度6的页面加载中将父数据共享到不同的组件

1 个答案: