Angular 子路由重新加载父组件

Question

我将提供很多背景知识(可能是不必要的)，因为我真的不知道如何提出这个问题。

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

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

我正在尝试确定我是否错误地构建了组件关系，或者我是否从错误的 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>

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