如何在Angular中为多个子组件提供数据？

Question

我在Angular中有一个应用程序，需要一些关于构建事物的最佳方法的指导。在根级别是一个组件<App>，带有一个子Router-Outlet组件（当然可以解析为许多不同的组件）。

我有一个带有Subject的服务提供者，它提供了App组件的多个子组件所依赖的对象。在我看来，最好的方法是让App组件订阅Subject，并在Subject发出时更新一些东西。不幸的是，我不太清楚什么东西可能是这样的，所有子组件也可以访问该值。

让每个单独的组件依赖于服务的替代方案似乎有点多余，因为每个文件都有代码：

ngOnInit(){
    this.myService.myData.subscribe(data => {
        this.data = data;
    });
}

这违反了DRY原则。

我甚至不确定我这里没有X-Y问题。基本上，有一些数据需要多个视图异步检索。此数据可能会在应用的生命周期内发生变化。拥有我在上面描述的提供者/主题/数据结构与Angular做一点DI似乎是一个逻辑，如果有点复杂，实现它的方式。

我该如何做到最好？

Answer 1

通常，您需要使用服务来管理本地状态（在一批组件之间共享的东西）和NGRX以用于应用程序范围的状态。

在您的情况下，如果它的应用程序范围和方案需要它，那么我建议建立一个商店，您可以在其中分配信息到您的组件，而无需在任何地方注入服务。

您仍然需要在每个组件中订阅商店，但它更干净。此外，如果您发现违反DRY原则，您可以订阅服务中的商店并使用该商店在本地分发信息。但是，如果您需要更改订阅中的逻辑，则此方法不起作用。

我的建议，如果它是一个大应用程序，创建一个商店并订阅您的组件进行更改。