在 ngoninit 上调用时如何避免多次调用服务答案

【问题标题】：How to avoid service call more than once when called on ngoninit在 ngoninit 上调用时如何避免多次调用服务
【发布时间】：2021-05-10 16:04:34
【问题描述】：

我有 3 个选项卡，它们是具有服务的 3 个不同组件，单击每个选项卡时会在页面加载时进行服务调用，即 ngoninit。要求就像为第一个选项卡加载选项卡数据并单击第二个选项卡然后再次单击返回到第一个选项卡然后不应进行第二次服务调用。数据应通过第一次服务调用本身保留。我怎样才能实现它。请帮忙

【问题讨论】：

在标签之间导航时组件是否被破坏？每个组件的 oninit 调用应该只触发一次，除非它们在切换选项卡之间被破坏，在这种情况下，我会很好奇这些选项卡是如何实现的。

标签： angular typescript

【解决方案1】：

您可以保存服务中的数据状态。例如，您可以为此目的使用行为主题。如果您在主题中找到数据，请使用它，否则进行 http 调用以填充它。在您的服务中执行以下操作：

 public myData: BehaviorSubject<SomeType[]> = new BehaviorSubject<SomeType[]>([]);

    constructor(private storage: Storage) { 

    }

    load(): void {

        this.storage.get('myData').then((data) => {

            this.myData.next(data);

        });

    }

订阅组件中的主题并检查它是否有相关数据。其他明智的做法是 http 调用来加载它。

【讨论】：