Angular 子路由重新加载父组件

Question

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

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

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

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

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

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

应用程序-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>

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

Angular 子路由重新加载父组件

Angular child routes reload parent component

angular-routing

angular