Angular子路由重新加载父组件

Question

我将提供很多背景知识（也许没有必要），因为我真的不知道如何问这个问题。

我有一个带有路由的 Angular 资产跟踪应用程序，它有一些父路由和几个子路由。子路由都指定父组件并激活该组件内的不同组件（参见代码）。

父组件会生成一个树，其中包含多个路由链接，这些链接指向按位置和类型分组的各种资产的详细信息页面，用户在此树中导航以选择资产。但是，当路由器链接被激活时，它会重新加载父组件，然后是树，现在用户留在起点，必须重新打开树。

我正在尝试确定我是否错误地构建了组件关系，或者我是否从错误的角度进入了这个工作流程。

本质上，我想要实现的是，当用户导航到父组件中的不同位置时，树结构保持不变。无论是详情页、仪表板等。

如何防止每次激活和停用子路由器链接时重新加载父组件？

app-routing.module.ts 代码：

{
    path: 'assets',
    canActivate: [ AuthGuard],
    children: [
         {
            path: '',
            component: AssetsComponent,
         },
         {
            path: 'details/:asset',
            component: AssetsComponent
         },
    ]
},

asset.component.ts 代码：

<div>
    <div class="select-pane">
        ... 
        <div class="asset-list-item lvl-3" routerLink="/assets/details/{{ assetList?.hostname }}" routerLinkActive="selected">{{ assetList?.hostname }}</div>
        ... 
    </div>
</div>
<div class="dialog-pane">
    <app-asset-dashboard *ngIf="!currentAsset"></app-asset-dashboard>
    <app-asset-detail *ngIf="currentAsset" [asset]="currentAsset"> 

Answer 1

因为AssetComponent 正在处理'' 和/details 路由，当您导航到/details 时，组件将在树重置的情况下再次加载。我建议，您以这种方式构建应用程序：

另外，我认为您在 '' 路由中需要 pathMatch:full，但我完全确定这是否可以解决任何问题。

{
    path: 'assets',
    component: AssetsComponent,
    canActivate: [ 
    AuthGuard
    ],
    children: [
    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
    },
    {
        path: 'dashboard',
        component: AssetDashboardComponent,
    },
    {
        path: 'details/:asset',
        component: AssetDetailComponent,
    },
    ]
},

AssetComponent 模板应该类似于：

<div>existing component template that has tree</div>
<router-outlet></router-outlet>

AssetDetailsComponent 模板应如下所示：

<div>Asset details are moved here </div>

每个组件的相应组件类将在其中移动数据和函数。