角子路由重新加載父組件

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"></app-asset-detail>
</div>

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>

每個組件的相應組件類將在其中移動數據和功能。