Всем привет. Столкнулся с проблемой: при переходе назад/вперёд (кнопки браузера) не сохраняются состояния страниц.
Проблема в том, что при переходе по маршрутам компоненты уничтожаются и заново создаются. Соответственно у DetailsPage вызывается ngOnInit(), в котором происходит ленивая загрузка объектов. После нажатии на элементе (чтобы открыть DetailPage) происходит ngOnDestroy(). При возвращении из DetailPage снова вызывается ngOnInit() у DetailsPage.
Как сделать, чтобы при переходах angular мог хранить состояния?
app.module.ts
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
//Маршруты
const appRoutes: Routes = [
{ path: '', redirectTo: '/details', pathMatch: 'full' },
{ path: 'details', component: DetailsPage },
{ path: 'details/:id', component: DetailPage },
{ path: 'about', component: AboutPage },
{ path: '**', component: NotFoundPage }
];
@NgModule({
declarations: [
AppComponent,
DetailsPage,
DetailPage,
AboutPage,
NotFoundPage,
FilterListComponent,
DetailListComponent
],
imports: [
RouterModule.forRoot(appRoutes),
],
providers: [
DetailService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
1.
<router-outlet></router-outlet>
details.ts
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
@Component({
selector: 'details-page',
templateUrl: './details.html'
})
export class DetailsPage implements OnInit, OnDestroy {
ngOnInit() {
console.error("ngOnInit");
this.loadData();
}
ngOnDestroy() {
console.error("ngOnDestroy");
}
// Кнопка перехода на новую страницу
goPage(id: any) {
console.error(id);
this.router.navigate(
['/details', id]
);
}
}
details.html
1.
2.
3.
4.
5.
<!--Фильтры-->
<filter-list #filterList (onSearchButtonPressed)="onSearch($event)"></filter-list>
<!--Список-->
<detail-list (onDetailPressed)=goPage($event)></detail-list>
Использую версию @angular/core": "^2.3.1", "@angular/router": "^3.3.1".
