刷新页面时的角度路由 - 子路由

Question

当我刷新页面时，我想停留在当前页面上，但当前当我刷新时，它会导航到另一个页面。

这与路由或状态有关吗？

当用户单击一行时，它会触发 editDeal 并导航到交易/详细信息/页面。我现在的问题是当我点击刷新但当前状态丢失时，我想留在当前页面上，即交易/详细信息/。

有人说带有子路由出口的子路由可以，但它没有分类。也许有人有想法将不胜感激。谢谢。

我们如何在 angular 中做到这一点？谢谢。

#代码

  editDeal(deal:any){
    let dealType = '';
    const state = { 
      data: {
        transaction: this.transaction,
        dealId: deal.id,
        dealType: dealType,
        dealName: deal.name,
        deal: deal,
        hasPendingApproval: this.hasPendingAprroval,
      },      
    }
    this.gotoDealDetails(state);    
  }

  gotoDealDetails(state:any){
    this.route.navigateByUrl(`deals/detail/`, {state: state});
  }

#my ts 路由代码

@NgModule({
  declarations: [
    DealDetailsComponent,
  ],
  imports: [
    SharedModule,
    RouterModule.forChild([
      {
        path: 'detail/:data',  canActivate: [AuthGuard], component: DealDetailsComponent, data: {
          userRoles: [Roles.ADMIN]
        },
      },
    ]),
  ],
})
export class DealsModule { }

#主要路线

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'deals',
        loadChildren: () => import('./features/deals/deals.module').then(m => m.DealsModule),
        data: {
          title: 'Deals',
          userRoles: [Roles.ADMIN]
        }
      },
    ]
  },
  {
    path: 'login',
    component: LoginComponent,
  },

Answer 1

不确定我是否正确地理解了你。

所以当你刷新页面时（f5）你想保持你的状态对吗？ 问题是 javascript 实际上会在页面刷新时丢失所有数据，所以你必须给它一些东西来加载它。

我猜你可以在某个时候从后端获取你的数据

有几种方法可以做到这一点，其中一种方法是参数，因此您的应用将从 url 获取必要的信息。

看起来像这样

“交易详情组件”

constructor( private route: ActivatedRoute){}
ngOnInit() {
 this.route.queryParams.subscribe((queryParams) => {
  console.log(queryParams)
  loadDataFromBackend(queryParams.id)
 }
}

为了让它工作，你实际上会像这样路由

this.router.navigate(['deals/detail/'], {
  queryParams: { dealId: deal.id },
});

您在浏览器中的最终 url 看起来像这个 domain.com/deals/detail?dealId=1

另一种持久化数据的方法是使用本地存储，并在组件加载时从本地存储加载数据。