我会提供很多背景信息(可能不必要),因为我不知道如何问这个问题。
我有一个带有路由的 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">
AssetComponent
处理了树形结构的显示和详细信息。在这种情况下,在导航到/details
后,组件会重新加载。我的建议是,将详细信息放在一个单独的组件中,比如AssetDetailsComponent
,并在AssetComponent
中使用<router-outlet>
渲染它。 - Aragorn<router-outlet>
吗? - Taylor V