我正在学习Angular 2，计划设计一个向导类型的应用程序。第一页上的组件需要将数据传递给其他页面上的组件。考虑使用服务来保留状态/数据，并将其注入向导的下一个视图/组件中。整个过程应该松散耦合。我认为设计可观察者模式并不实用，因为下一页/视图中的组件尚未可见。Angular 2中有哪些新功能可用于解决这个问题？
2个回答
11
我建议使用例如Redux来集中管理你的状态。然后，你将使用Angular中的@Input()和@Output()来传播你的状态到组件，并从你的组件中分派状态更改。
你会有一个顶级组件，它订阅状态更改，并使用子组件的@Input()来传递这些更改。你的子组件将使用@Output()发出状态更改请求，然后顶级组件会更新中央状态。
这样，你的各个组件就不必知道如何存储和更新状态，它们仅提供功能并接受可能对其功能产生所需影响的输入参数。
如果有很多深度嵌套的组件，它们本身也使用@Input()和@Output()提供功能，并且不直接与任何状态库通信。
我自己正在使用这种方法，它使每个组件非常精简和可重用，同时使跟踪你的状态变得超级容易，并大大降低了在各个组件之间同步状态的复杂性。
此外，您还应该查看ChangeDetectionStrategy和ChangeDetectorRef，因为可以使用此方法简化组件更改检测。通常，所有子组件都可以使用OnPush检查策略，这意味着它们的更改检测只会在其@Input()属性发生更改时运行。由于这是这种情况下状态更改的唯一方式，因此你可以告诉Angular不要检查其他更改。这也将有助于提高性能。
请注意，你可以仅使用常规的angular2服务来保存状态，但例如Redux提供了一些免费的东西，例如提供的开发工具。如果你选择Redux，请还看看Immutable.js，因为重要的是不要直接使用Redux改变状态。
- jgranstrom
4
谢谢，这是一个不错的方法！对于嵌套层级很深的子组件，你如何将状态更改传递回持有视图/应用程序“主”状态的顶层组件？你是否有一系列输出连接到顶部，或者是否有一种可以绕过这些链的快捷方式？ - Janne
1通常情况下，您会有一系列输出连接到顶部。如果嵌套过深而难以处理，则值得考虑将顶层组件的责任拆分为多个组件，这些组件正在操作和订阅集中状态的不同区域。 - jgranstrom
1我还没有完全掌握最佳实践和/或 Angular “希望”我这样做的方式。在大多数情况下，我一直依赖于大量输入输出，但最近我意识到我可以只向服务添加一些属性，并将其注入到我需要从/之间保存状态的组件中。该服务本质上是更“集中化”的存储 - 也许这就是 Redux 所做的事情，只是更加复杂？或者不是这样吗？使用服务并依赖 DI 而不是使用大量输入/输出是否有任何问题？我只是觉得注入服务更容易。 - default_noob_network
我认为我已经理解了我的评论有多么天真 ^^. 我不仅在我的应用程序中已经使用了Redux，而且现在正在使用它来执行我所询问的任务（至少是在组件/服务之间进行通知，但不一定是状态存储）： https://dev59.com/J1sW5IYBdhLWcg3w-rTB#35568924 - default_noob_network
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
@Input()，@Output()用于父子关系（在某种程度上也适用于兄弟姐妹关系），并为所有其他关系提供服务。 - Günter ZöchbauerBehaviorSubject的服务来确保尚未可见的组件在初始化时获取最新的数据。https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/behaviorsubject.md - Harry