Нужна помощь или совет в небольшой донастройке роутера на Angular2+
. Собственно, вот как все работает сейчас:
Есть основной компонент с <router-outlet>
, есть компонет со списком стратегий и пагинацией на Bootstrap
(пагинация юзается только для генерации разметки, все поведение на Ангуляре). При выборе страницы, показывается нужный список стратегий, а при нажатии на стратегию, вместо списка отрисовывается компонент детализации с описанием выбранной стратегии. Так вот, если мы переходим на вторую страницу списка и выбираем там стратегию, а потом нажимаем кнопку "Назад" в браузере, то браузер возвращается не на вторую страницу, с которой был сделан переход на детализацию, а на первую страницу с соответствующим списком стратегий.
А вот какое поведение нужно:
Если мы переходим на страницу детализации выбранной стратегии, например, с третьей страницы, то при нажатии кнопки "Назад", возврат должен происходить обратно на третью страницу списка.
router-config.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StrategiesListComponent } from './strategies-list/strategies-list.component';
import { StrategiesDetailComponent } from './strategies-detail/strategies-detail.component';
declare const I18n: any;
export const routes: Routes = [
{
path: `${I18n.locale}`,
children: [
{
path: 'strategies',
component: StrategiesListComponent,
},
{
path: 'strategies/:url',
component: StrategiesDetailComponent,
},
],
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class StrategiesAppRoutingModule { }
app.component.ts
import { Component, ApplicationRef } from '@angular/core';
@Component({
selector: 'app-strategies',
template: '<router-outlet (activate)="onActivate()"></router-outlet>',
})
export class StrategiesComponent {
constructor(private appRef: ApplicationRef) {}
onActivate(): void {
this.appRef.tick();
}
}
app-list.component.ts
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { switchMap } from 'rxjs/operators';
import { State, StateProp, StreamProp } from 'lib/store';
import { IStrategiesPreview, IStrategiesState } from '../strategies.model';
import { StrategiesService } from '../strategies.service';
import template from './strategies-list.tpl.pug';
@Component({
selector: 'app-strategies-list',
template,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StrategiesListComponent implements OnInit {
// ниже наш местный стор, при инициализации компонента получает указанные
// дефолтные значения, так же может преобразовать их в потоки (декораторы ниже)
state: State<IStrategiesState> = new State({
page: 1,
count: null,
perPage: 10,
showPagination: false,
});
@StateProp() page: number;
@StateProp() count: number;
@StateProp() perPage: number;
@StreamProp() page$: Observable<number>;
@StreamProp() count$: Observable<boolean>;
@StreamProp() perPage$: Observable<number>;
@StreamProp() showPagination$: Observable<boolean>;
strategies$: Observable<IStrategiesPreview[]>;
constructor(private strategiesService: StrategiesService) {}
ngOnInit(): void {
// тут патчу стор чтобы получить нужные данные для пагинации и потоками пробрасываю во вьюху
this.strategiesService.load('total')
.subscribe(total => this.state.patch({
count: Math.ceil(total.count / this.perPage) * 10,
showPagination: total.count > this.perPage,
}));
// ну и получаю в потоке нужный список в зависимости от текущей страницы с помощью заголовков в запросе
this.strategies$ = this.page$.pipe(
switchMap(page => this.strategiesService.load('', { headers: {'X-Page': page} })),
);
}
// а тут просто меняем текущую страницу
changePage(val: number): void {
this.page = val;
}
}
вот так выглядит бутстрап во вью
nav.text-center(*ngIf="showPagination$ | async")
ngb-pagination([(page)]="page", [collectionSize]="count$ | async", [directionLinks]="true", [maxSize]="perPage$ | async", ellipses="true", (pageChange)="changePage($event)")
Если нужно добавить что-то еще, говорите, мне кажется, что ошибка в самом механизме определения текущей страницы при инициализации листа стратегий, но где именно не могу сообразить. Вроде сам роутер Ангуляра должен хранить некое состоянии связанное с переходами по маршрутам, но и там я ничего не смог найти. Выручайте, товарищи! Все же я никак не могу в механизме роутера разобраться.
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
На странице есть radio элемент, на который я хочу кликнутьТаких элементов много, поэтому я хочу найти нужный и кликнуть на него
Затея такая: на главной странице есть менюшкаКогда перехожу на любую другую страницу эта менюшка скрыта в "Каталог" и когда я нажимаю на каталог...
можно ли получить заголовки при отправке аякса, а имеено cookies?