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

标签 angular

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

最佳答案

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

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

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

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

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

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

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

关于angular - 如何保持 Angular 2的状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36931700/

相关文章:

javascript - Ionic platform.exitApp() 不保存 localStorage

html - Angular 4 firebase下拉选择标签选项

javascript - Angular 2 Material如何设置一个字段不变

node.js - 将项目发布到 JSON 服务器数据库 - Angular

RouteConfigLoadEnd-Handler 中的 Angular 访问 route._loadedConfig

带有 canActivate 路由保护的 Angular ngrx/store

node.js - 如何在 Angular 2 和 Node JS 中更新 ng2-chartjs2 图表中的数据

javascript - FabricJS: Angular 6 形状选择问题

javascript - 如何将 Mat-Select 值传递到 API 调用中的 header

angular - 如何使用 Jasmine Marbles 为 angular 的 HttpClient 编写单元测试?