我正在学习Angular 2,计划设计一个向导类型的应用程序。第一页上的组件需要将数据传递给其他页面上的组件。考虑使用服务来保留状态/数据,并将其注入向导的下一个视图/组件中。整个过程应该松散耦合。我认为设计可观察者模式并不实用,因为下一页/视图中的组件尚未可见。Angular 2中有哪些新功能可用于解决这个问题?
我正在学习Angular 2,计划设计一个向导类型的应用程序。第一页上的组件需要将数据传递给其他页面上的组件。考虑使用服务来保留状态/数据,并将其注入向导的下一个视图/组件中。整个过程应该松散耦合。我认为设计可观察者模式并不实用,因为下一页/视图中的组件尚未可见。Angular 2中有哪些新功能可用于解决这个问题?
我建议使用例如Redux来集中管理你的状态。然后,你将使用Angular中的@Input()和@Output()来传播你的状态到组件,并从你的组件中分派状态更改。
你会有一个顶级组件,它订阅状态更改,并使用子组件的@Input()来传递这些更改。你的子组件将使用@Output()发出状态更改请求,然后顶级组件会更新中央状态。
这样,你的各个组件就不必知道如何存储和更新状态,它们仅提供功能并接受可能对其功能产生所需影响的输入参数。
如果有很多深度嵌套的组件,它们本身也使用@Input()和@Output()提供功能,并且不直接与任何状态库通信。
我自己正在使用这种方法,它使每个组件非常精简和可重用,同时使跟踪你的状态变得超级容易,并大大降低了在各个组件之间同步状态的复杂性。
此外,您还应该查看ChangeDetectionStrategy和ChangeDetectorRef,因为可以使用此方法简化组件更改检测。通常,所有子组件都可以使用OnPush检查策略,这意味着它们的更改检测只会在其@Input()属性发生更改时运行。由于这是这种情况下状态更改的唯一方式,因此你可以告诉Angular不要检查其他更改。这也将有助于提高性能。
请注意,你可以仅使用常规的angular2服务来保存状态,但例如Redux提供了一些免费的东西,例如提供的开发工具。如果你选择Redux,请还看看Immutable.js,因为重要的是不要直接使用Redux改变状态。
@Input()
,@Output()
用于父子关系(在某种程度上也适用于兄弟姐妹关系),并为所有其他关系提供服务。 - Günter ZöchbauerBehaviorSubject
的服务来确保尚未可见的组件在初始化时获取最新的数据。https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md - Harry