Angular 5 Master / Detail路由最佳实践

Question

我正在学习Angular 5，而且我坚持使用Master / Detail最佳实践。在Angular官方教程中，主要/详细信息部分（此处为：https://angular.io/tutorial/toh-pt3）具有以下模式：

• 主要组件（包含列表的英雄）
  • master中使用的详细信息组件（所选Hero的详细信息）

此示例在没有路由配置的情况下运行，因此在Hero选择期间不会更改URL。整个逻辑在主组件内运行。

稍后会有一个路由器部分（此处为：https://angular.io/tutorial/toh-pt5）

路由示例在同一级别的路由中使用List和Detail组件，并且两者都使用自己的逻辑单独运行。

我的问题＃1：

任何Angular约定都可以组合这两个样本。我的目的是创建HeroesContainer，其中包含两个组件 - 英雄列表和英雄细节。

• 英雄容器组件
  • 英雄榜（包含列表的英雄）
  • 英雄明细组件（所选英雄详细）

然后将路由器设置为：

switch

然后如果路由了NO，则隐藏HeroDetailComponent。

如果路由了任何id，则隐藏HeroesListComponent。

我的问题＃2：

当导航到同一个组件时，Angular会保留组件的状态吗？使用案例：用户执行排序＆amp;在列表上过滤，打开一些Hero（导航到细节），然后点击“后退按钮”。我使用AngularJS中描述的模式来实现这个目标。

感谢您的任何建议！

Answer 1

这篇文章足够接近： https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5