如何在Angular的父子组件之间共享数据以简化单元测试

Question

我有一个主要成分，它是一个充满信息的矩阵。可以在标题项目以及左行（第一列项目）中进行选择。进行选择时，右侧和左侧侧栏都有不同的选项和统计信息可供使用。

class ParentComponent { } 
class SelectedCategoryComponent { } 
class SelectedRoleComponent { } 
class OtherComponent { } 

鉴于侧边栏在选择中使用了相关数据，那么共享信息的最佳方法是什么？

一种方法是对侧边栏使用命名的路由器插座。这意味着在组件加载时将发出任何请求，并且实际上，在这种情况下，如果不使用命名路由器出口，则重新使用布局会变得很复杂。这将允许导航回以前的状态，并且可以使单元测试更容易管理，并减少数据依赖性。不利的一面是，布线将更具挑战性。

class ParentComponent { } 

// id is passed to the components via named router-outlets
class SelectedCategoryComponent { } 
class SelectedRoleComponent { } 
class OtherComponent { } 

现在，如果我采用使用父组件/子组件关系的方法，我认为由于存在数据依赖关系，因此可能更难测试。来回通信的实现可能会有些棘手，并且布局必须硬编码到父视图中。

// All hosted on the same page
class ParentComponent { } 
class SelectedCategoryComponent { } 
class SelectedRoleComponent { } 
class OtherComponent { } 

@Injectable({...})
class SharedDataService 
{ 
   sharedState: T;
}

随着用户界面复杂性的增加，确保最佳的单元测试体验，连接这些组件的最佳方法是什么？