angular - 如何保持 Angular 2的状态？

Question

我刚刚开始思考 Angular 2，并着眼于设计一个向导类型的应用程序。第 1 页上的组件需要将数据传递给其他页面上的组件。考虑使用服务来保存注入(inject)到向导的下一个 View /组件中的状态/数据。整个事情应该是松耦合的。我认为设计可观察模式没有用，因为下一页/ View 之一上的组件尚不可见。 Angular 2 中的哪些新功能可以用来解决这个问题？

Answer 1

我建议使用例如 Redux 来保持你的状态集中.然后，您将使用 Angular 的 @Input() 和 @Output() 将您的状态传播到组件，并从您的组件分派(dispatch)状态更改。

您将拥有一个订阅状态更改的顶级组件，并使用子组件@Inputs 传播这些更改。您的子组件会使用 @Outputs() 向顶级组件发出状态更改请求，顶级组件又会更新中央状态。

这样一来，您的各个组件就不必知道状态是如何存储和更新的，它们只是提供功能并接受可以对其功能产生预期影响的输入参数。

如果您有许多深层嵌套的组件，它们自己也会使用 @Input() 和 @Output() 来提供功能，并且不直接与任何状态存储通信。

我自己正在使用这种方法，它使每个组件都非常精简和可重用，同时让跟踪状态变得 super 容易，并大大降低了跨组件同步状态的复杂性。

你还应该看看 ChangeDetectionStrategy和 ChangeDetectorRef，因为您可以使用此方法简化组件更改检测。您的所有子组件通常都可以使用所谓的 OnPush 检查策略，这意味着它们的变化检测只会在它们的 @Input() 属性发生变化时运行。由于这是在这种情况下状态发生变化的唯一方式，因此您可以告诉 angular 而不是检查更改。这也有助于提高性能。

请注意，您可以仅使用常规的 angular2 服务来保持状态，但是像 Redux 这样的东西可以免费为您提供一些东西，例如提供的开发工具。如果您使用 Redux，也可以看看 Immutable.js，因为不要直接使用 Redux 改变状态很重要。