Angular 是否可以更改7中路由器出口标签的内容？

我想按照Angular 7中的以下路线实现一个深入的仪表板

该应用程序的工作原理如下：

<router-outlet name="version_distribution">
    <div style="padding:10px; width: 100vw; height: 100vh; max-width: 90%; max-width: 90%;">
        <p-chart type="bar" [data]="data" width="75vw" height="75vh" (onDataSelect)="onDataSelect($event)"></p-chart>
    </div>
</router-outlet>

• 导航到url：其中显示给定软件的可用版本以及其他信息。它被称为版本页面
• 通过在版本页面上选择版本，版本页面的内容应切换到版本详细信息页面。这样，用户可以深入查看所选组件的更多详细信息

为了达到上述目的

const routes: Routes = [
    { path: '', redirectTo: '/info', pathMatch: 'full' },
    { path: 'info', component: InfoComponent },
    {
        path: 'versions',
        component: VersionComponent,
        children: [
            {
                path: ':version',
                component: VersionDetailComponent,
                outlet: 'version_detail'
            }
        ]
    }
];

VersionComponent html如下所示：

<router-outlet name="version_distribution">
    <div style="padding:10px; width: 100vw; height: 100vh; max-width: 90%; max-width: 90%;">
        <p-chart type="bar" [data]="data" width="75vw" height="75vh" (onDataSelect)="onDataSelect($event)"></p-chart>
    </div>
</router-outlet>

因此，当我选择一个版本时，页面的内容不会改变。但是，如果内容如下所示，则路由工作正常，版本详细信息将加载到页面顶部：

<router-outlet name="version_distribution"></router-outlet>
    <div style="padding:10px; width: 100vw; height: 100vh; max-width: 90%; max-width: 90%;">
        <p-chart type="bar" [data]="data" width="75vw" height="75vh" (onDataSelect)="onDataSelect($event)"></p-chart>
    </div>

问题是，如何在路由过程中交换内容？我假设

标记中包含的内容被交换

---

我正在考虑一种可能的解决方法，版本页面作为应用程序这一部分的登录页面，也由子路由加载，因此整个逻辑都作为子路由进行管理。但是，我很好奇是否可以用我最初的方法解决这个问题。

路由器出口是内容占位符，它将显示从版本中选择的版本。 例：从下面的版本

1.Version1 
2.Version2
3.Version3

<Router-Outlet>"Here Version information will be displayed."</Router-Outlet>

1.Version1
2.版本2
3.3版本
“此处将显示版本信息。”

单击Version1，路由器出口将在DOM中显示Version1信息，而不是Version2和Version3

---

对于导航，您应该使用：

route。为您正在使用的每个特定版本导航（/versions/（version\u detail:1.2））

。

否，插座下的内容将被交换。你不应该在路由器出口标签上放任何东西。此外，将代码放在与路由器相同的模板中不会交换它，因为路由器只是路由内容的占位符。