使用服务保存产品信息答案

【问题标题】：Saving product info using Services使用服务保存产品信息
【发布时间】：2019-10-28 00:02:19
【问题描述】：

亲爱的程序员，你好，我有一个项目，我必须在最喜欢的组件部分将一些产品保存为收藏夹，我必须将它们保存到服务中，然后从该特定组件调用它，任何人都可以帮助如何实时和异步地做到这一点？任何指南或线索就足够了，我们将不胜感激。

【问题讨论】：

提问时要具体。这个问题已经有了答案@stackoverflow.com/questions/50371582/…
您提到的这个答案与我所问的类似，但具体而言，我想获取一些数据信息并将其同时显示在另一个组件中，就像电子商务网站中的购物车一样

标签： angular

【解决方案1】：

为此，我会考虑在您的服务中使用BehaviorSubject。像这样的东西可以让你通过组件更新主题，并在 UI 上看到它实时更新。

这就是我建立一个简单的工作示例的方式：

favorite.service.ts

import { BehaviorSubject } from 'rxjs';

export class FavoriteService {

    public favs = new BehaviorSubject([]);

    constructor() { }

    public updateSubject(newItem: any[]): void {
        this.favs.next(newItem)
    }

}

favorite.component.ts

export class FavoriteComponent implements OnInit {

    public favorites = this.service.favs;

    ngOnInit(): void {
        const items = ['item1', 'item2'];
        this.service.updateSubject(items);
    }

}

您可以在 html 中看到更新后的数组，如下所示：

favorite.component.html

<div *ngFor="let item of favorites.value">
    {{item}}
</div>

因此，每当您调用 updateSubject 方法时，它都会使用新数组更新行为主题，并且添加/更改的任何项目都应立即显示在您的 html 上。

【讨论】：