7

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

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

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

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

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

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

app-routing.module.ts 代码：

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

资产.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>
4

1 回答 1

2

因为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>

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

于 2019-01-21T15:29:51.557 回答