#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