2

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

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

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

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

4

2 回答 2

-1

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

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

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 中编写的操作。这里没有组件路由。

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

希望这对你有帮助

快乐编码

于 2020-03-08T18:15:41.847 回答
-1

我认为这里没有一个正确的答案，这取决于用例到用例。我已尝试根据我的经验尽可能地回答您的问题，但我不是 100% 确定所有这些。

我认为这里有两件主要的事情要考虑，我们是要优化代码的可读性/可维护性还是运行时性能。

代码可读性/可维护性

拆分为智能组件和哑组件是代码可读性/可维护性的最佳实践。您的智能组件应该包含您的大部分 JS 逻辑以及与服务的通信。哑组件不应该注入服务，而是通过 Inputs 和 Outputs 与它们的父级通信。这带来的一些好处是：

  1. 愚蠢的组件可以重复使用，因为它们不依赖于任何服务。
  2. 很容易理解哑组件的逻辑是唯一影响它们的输入和输出
  3. 愚蠢的组件变得易于测试，因为它们可以在没有任何服务的情况下独立存在
    1. 当您使用 OnPush 更改检测策略时，可以提高运行时性能（下一节将详细介绍）

但正如你所说，当你开始有很多输入和输出时，它开始变得混乱，我同意这一点。

当我在单个组件中总共达到 6 个或更多输出和输入时，我通常会开始考虑一个愚蠢的组件是否应该变成一个智能组件。此外，如果我必须将数据向上或向下传递几个步骤，我会考虑将一个愚蠢的组件变成一个智能组件。

我也认为可重用的潜力很重要。如果组件有很大的重用潜力，我会接受它有很多输入和输出。如果我知道它永远不会被重用，我还不如让它变得聪明，把服务带进来。

表现

在性能方面，我相信在哑组件中包含尽可能多的 HTML 总是最好的。这是因为您可以通过使用更改检测策略 OnPush 来优化这些组件。

于 2020-03-08T18:18:47.347 回答