Angular子路由重新加载父组件

Question

Angular子路由重新加载父组件

angularangular-routing

7

我会提供很多背景信息（可能不必要），因为我不知道如何问这个问题。

我有一个带有路由的 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">

- Taylor V

1

从问题中我理解到，AssetComponent 处理了树形结构的显示和详细信息。在这种情况下，在导航到 /details 后，组件会重新加载。我的建议是，将详细信息放在一个单独的组件中，比如 AssetDetailsComponent，并在 AssetComponent 中使用 <router-outlet> 渲染它。 - Aragorn

1

是的，AssetComponent 显示了一棵树，然后我有另外两个组件，AssetDetailsComponent 和 AssetDashboardComponent。导航到 /details/'some-asset' 会重新加载整个 AssetComponent，这是不期望的。那么我应该在 AssetComponent 中放置 <router-outlet> 吗？ - Taylor V

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aragorn · Accepted Answer

因为AssetComponent正在处理''和/details路由，所以当你导航到/details时，组件会重新加载并重置树形结构。我建议你按照以下方式构建应用程序:

此外，我认为你需要在''路由中使用pathMatch:full，但我不确定这是否解决了任何问题。

"Original Answer"翻译成"最初的回答"

{
    path: 'assets',
    component: AssetsComponent,
    canActivate: [ 
    AuthGuard
    ],
    children: [
    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
    },
    {
        path: 'dashboard',
        component: AssetDashboardComponent,
    },
    {
        path: 'details/:asset',
        component: AssetDetailComponent,
    },
    ]
},

资产组件模板应该长成这样：

<div>existing component template that has tree</div>
<router-outlet></router-outlet>

资产详情组件模板应该如下所示：

Original Answer翻译成“最初的回答”。

<div>Asset details are moved here </div>

每个组件的相应组件类将具有其数据和功能。

最初的回答已经被移动到它们中。