угловая маршрутизация при обновлении страницы — дочерний маршрут

#angular #typescript #routes #angular-material

#угловой #машинописный текст #маршруты #угловой материал

Вопрос:

Когда я обновляю страницу, я хочу остаться на текущей странице, но в настоящее время, когда я обновляю ее, она переходит на другую страницу.

Это как-то связано с маршрутами или штатом?.

Когда пользователь нажимает на строку, она запускает 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});  }  

#мой код маршрута 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: () =gt; import('./features/deals/deals.module').then(m =gt; m.DealsModule),  data: {  title: 'Deals',  userRoles: [Roles.ADMIN]  }  },  ]  },  {  path: 'login',  component: LoginComponent,  },  

Ответ №1:

Не уверен, правильно ли я вас понял.

Итак, когда вы обновляете страницу(f5), вы хотите сохранить свое состояние правильно? Дело в том, что javascript фактически теряет все данные при обновлении страницы, поэтому вам нужно дать ему что-то для загрузки.

Я предполагаю, что вы можете в какой-то момент извлечь из бэкенда свои данные

Есть несколько способов сделать это, одним из которых были бы параметры, чтобы ваше приложение получало необходимую информацию с URL-адреса.

выглядело бы примерно так

«Составная часть сделки»

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

чтобы это сработало, вы бы на самом деле проложили такой маршрут

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

ваш конечный URL-адрес в браузере будет выглядеть следующим образом domain.com/deals/detail?dealId=1

другим способом сохранения данных может быть использование локального хранилища, и при загрузке компонентов вы загружаете данные из локального хранилища.

Комментарии:

1. Моя текущая проблема сейчас заключается в том , что когда я обновляю страницу сделок/сведений, она перенаправляется на другую страницу, которую я не понимаю, почему, это как-то связано с маршрутами или состояниями ?

2. это моя текущая проблема

3. Когда я обновляю страницу, я хочу остаться на текущей странице, но в настоящее время, когда я обновляю ее, она переходит на другую страницу.

4. Измените это в пути кода маршрута ts: «детали/:данные» на путь:»детали».

5. Я изменил путь: «подробности/:данные» на путь: «подробности», теперь он больше не перенаправляется на страницу сведений, потому что он больше не может распознать URL