Как правильно сохранить параметры после возврата?
В моем приложении Angular у меня есть страницы списка и сведений, и я хочу сохранить значение pageIndex перед переходом на страницу сведений. На странице сведений есть кнопка «Назад», и я могу вернуться на страницу списка, нажав на эту кнопку. Однако я хочу получить значение pageIndex при переходе обратно на страницу списка и позволить пользователю открыть страницу, на которой он был раньше. Например, я перехожу на 3-ю страницу в списке и нажимаю «Подробнее». На этом этапе я установил pageIndex на 3, а затем перешел к деталям. Затем, нажав кнопку «Назад», я могу вернуться на страницу списка, но мне нужно получить pageIndex как 3.
Итак, как элегантно решить эту проблему в Angular 10+?
список-компонент
details(id) {
this.router.navigate(['/details'], { state: { id: id } }); // I pass id value of the record
}
детали-компонент
constructor(private router: Router) {
this.id = this.router.getCurrentNavigation().extras.state.id;
}
back() {
this._location.back();
}
Или вы можете использовать sessionStorage для хранения значения pageIndex, а затем в функции ngOnInit для получения pageIndex.
@KevinZhang 1. Почему мне следует избегать использования _location.back()?
@KevinZhang 2. Не могли бы вы опубликовать ответ для сценария route parameter и sessionStorage? На самом деле я уже передал параметр id (state: { id: id }) и думаю, что могу добавить pageIndex к этим параметрам. Но как насчет передачи их обратно и изменения rouring.module? Не могли бы вы привести пример со ссылкой на список и страницу сведений?
Если я не ошибаюсь, упомянутый вами pageIndex является страницей для вашей таблицы данных в компоненте списка? Если это так, когда вы используете _location.back(), браузер будет перенаправлять на последнюю запись истории, запись истории браузера не будет иметь этой информации, поэтому вам нужно получить pageIndex из маршрутизатора или sessionStorege или других.
Идентификатор для вашего компонента сведений, вам также нужно добавить параметр маршрутизатора для вашего компонента списка.
Да, упомянутый вами pageIndex является страницей для вашей таблицы данных в компоненте списка. Но не могли бы вы опубликовать пример, указав параметры routing.module? Я попробовал этот подход, но не смог заставить его работать.
С другой стороны, а как насчет других вариантов? sessionStorage и с помощью специального сервиса или класса?
Я опубликовал ответ, который использует sessionStorage в вашем исходном посте. Вы проверили это?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Используйте sessionStorage, listService или маршрутизатор queryParams, чтобы отслеживать текущий pageIndex.
Я бы поддержал queryParams, так как это кажется наиболее логичным, и вы также можете напрямую ссылаться на конкретную страницу.
constructor(
private route: ActivatedRoute,
) { }
// Access the queryParam in list component
// Ie /list?pageIndex=4
this.route.queryParams.subscribe(params => {
// Do something with params.pageIndex if it exists
}
);
Я бы также подумал о том, чтобы изменить способ обработки маршрутизации до деталей. Если маршрут к списку /list, то маршрут к деталям должен быть /list/<listid>, чтобы вы могли напрямую ссылаться на детали, если это необходимо.
Вы можете получить доступ к параметру listId, как показано ниже, но обратите внимание, что он также должен быть указан как параметр в определении маршрутизатора.
// Router definition
{ path: 'list/', component: ListComponent},
{ path: 'list/:listId', component: ListIdComponent}
// Access the listId in the details component
this.route.params.subscribe(param=> {
// Do somthing with param.listId
});
Просто напишите простой пример, чтобы заставить его работать, я использую sessionStorage и маршрутизатор вместе, использую маршрутизатор, чтобы показать ваш модуль маршрутизации, на самом деле вы можете просто использовать только sessionStorage и обернуть его в servive. Затем вы можете получить pageIndex в любом месте.
И если вы хотите использовать только маршрутизатор, параметр pageIndex будет размещен как в компоненте списка, так и в компоненте сведений, поскольку все эти два компонента должны использовать это значение, в компоненте списка вам потребуется pageIndex для установки таблицы данных, в компоненте сведений вы нужно, чтобы это значение передавалось компоненту списка при срабатывании обратного перенаправления.
Модуль маршрутизации, как показано ниже:
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ListComponent } from "./list/list.component";
import { DetailComponent } from "./detail/detail.component";
const routes: Routes = [
{ path: "", redirectTo: "list", pathMatch: "full" },
{
path: "list/:pageIndex=1",
component: ListComponent,
pathMatch: "full"
},
{
path: "detail/:id",
component: DetailComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Здесь вы можете перейти на страницу списка со страницы сведений:
this.router.navigate(["/list/" + pageIndex]);
А затем в методе ngOnInit страницы списка установить текущий индекс страницы в вашу таблицу данных. Вот демо: https://stackblitz.com/edit/angular-ivy-5vmteg?file=src/app/list/list.component.ts
PS: я использовал таблицу данных в пакете ngx-pluto, это пакет, который я написал ранее. ~_~
Не вызывайте _location.back(), вам нужно добавить параметр маршрута для компонента списка, такого как pageIndex, и использовать угловой маршрутизатор для навигации по this.router.navigate(['/list'], {pageIndex: xxx})