angular - 将数据传递给组件还是使用单例服务更高效

问题描述

我有这个仪表板创建应用程序，该应用程序具有非常深的嵌套组件，我需要将状态（例如当前仪表板）传播到这些组件。当前仪表板是一个相当大的对象，其中包含有关此仪表板中的小部件的所有信息，它们在哪里，它们的外观等。

现在我正在调用数据库，将数据转换为仪表板对象，然后通过将此对象传递给工具栏、侧边栏、画布、小部件等组件来呈现仪表板。这些子组件可能会更改仪表板对象的属性，但不会更改仪表板对象本身，因此我认为不需要输出。

它工作正常，但某些组件的输入太多，有时甚至需要输出。它变得非常混乱。

我正在考虑创建一个管理整个应用程序状态的服务。我在网上找不到太多关于最佳实践的信息，只有很多方法可以做同样的事情。如果有人能提供任何关于为什么使用一种状态管理方法比另一种更好的信息，那就太好了！

标签： angularangular-componentsangular-ivy

我们可以通过以下方式将数据从一个组件传递到另一个组件

使用@Input、@Output（组件交互）
使用服务
使用路由参数
使用解析器

1）组件交互 @Input和@Output我们可以通过事件发射器传递数据。

2) @Injectable({'providedIn':'root'}) 这将是您整个项目（单例）中的一项服务。我们可以通过在组件中创建对象来访问服务中的成员

3) 我们可以使用navigate和navigateByUrl在 Router中将数据附加到您的 url 参数中。我们可以通过使用 ActivatedRoute 示例来获取组件中的数据：

this._ActivatedRoute.queryParams.subscribe((params: Params) => {
        if(params){
        }
});

4）通过使用解析器，我们可以在ActivatedRoute中设置数据。在导航时，我们可以在解析器函数中执行操作。我们可以通过不同的方式实现这一点。如果要在父路由中执行此操作，则可以在父路由声明中添加此解析器。或者您需要在特定的组件导航中触发此功能，您可以在该特定路由器声明中给出。或者，您可以导航到此解析器。

实施1

{
    path: '',
    resolve: [
     authdetails: UserAuthResolver
   ],
   children: [{
    path: 'a',
    component: ComponentA,
   },{
    path: 'b',
    component: ComponentB,
   }]
  }

在此实现中，您可以在父路由导航时触发解析器。

实施 2

{
    resolve: [
     authdetails: UserAuthResolver
   ],
    path: '',
    component: dashboard,
   }

在此实现中，您可以在每次组件单击时触发解析器。而这个authdetails可以在组件中使用ActivatedRoute.

实施 3

{
    path: 'logout',
    resolve: {
      logout: LogoutResolver
    }

在此实现中，您只能执行 LogoutResolver 中编写的操作。这里没有组件路由。

所有这些都基于用例。我认为解析器更适合你。

希望这对你有帮助

快乐编码

angular - 将数据传递给组件还是使用单例服务更高效

问题描述

解决方案

推荐阅读