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>

每个组件各自的组件类将在其中移动数据和功能。

角子路径重新加载父组件

1 个答案: