Angular 5主/明细路由最佳实践

Question

我只是在学习Angular 5，并且坚持使用Master / Detail的最佳实践。在Angular官方教程中的Master / Detail部分（此处：https : //angular.io/tutorial/toh-pt3）具有以下模式：

• 主组件（包含英雄列表）
  • 母版中使用的详细信息组件（这是选定英雄的详细信息）

该示例在没有Route配置的情况下运行，因此在Hero选择过程中URL不变。整个逻辑在主组件内操作。

下一步，有一个“路由器”部分（此处：https : //angular.io/tutorial/toh-pt5）

路由示例在同一级别的路由中同时使用列表组件和详细信息组件，并且两者都以其自己的逻辑分别操作。

我的问题1：

是否可以将这两个示例结合在一起使用任何Angular约定？我的目的是创建包含两个组件的HeroesContainer-Heroes List和Hero Detail。

• 英雄容器组件
  • 英雄榜（其中包含列表英雄）
  • 英雄详细信息组件（是所选英雄的详细信息）

然后将路由器设置为：

{
  path: 'heroes',
  component: HeroesContainerComponent,
}, {
  path: 'heroes/:id',
  component: HeroesContainerComponent,
}

然后，如果没有路由ID，则会隐藏HeroDetailComponent。

如果路由任何ID，则HeroesListComponent将被隐藏。

我的问题2：

导航到相同组件时，Angular是否会保留组件的状态？用例：用户对列表进行排序和过滤，打开一些Hero（导航至详细信息），然后单击“ Back button”。我在AngularJS中使用了上述模式来实现这一目标。

感谢您的任何建议！