Настройка роутера на Ангулар2+

247
20 июня 2018, 10:10

Нужна помощь или совет в небольшой донастройке роутера на 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)")

Если нужно добавить что-то еще, говорите, мне кажется, что ошибка в самом механизме определения текущей страницы при инициализации листа стратегий, но где именно не могу сообразить. Вроде сам роутер Ангуляра должен хранить некое состоянии связанное с переходами по маршрутам, но и там я ничего не смог найти. Выручайте, товарищи! Все же я никак не могу в механизме роутера разобраться.

READ ALSO
Как кликнуть на radio элемент с заданным текстом

Как кликнуть на radio элемент с заданным текстом

На странице есть radio элемент, на который я хочу кликнутьТаких элементов много, поэтому я хочу найти нужный и кликнуть на него

185
Меню на главной на всех других страницах прячется в &ldquo;Каталог&rdquo; при нажатии показывается!

Меню на главной на всех других страницах прячется в “Каталог” при нажатии показывается!

Затея такая: на главной странице есть менюшкаКогда перехожу на любую другую страницу эта менюшка скрыта в "Каталог" и когда я нажимаю на каталог...

277
Cкрыть часть текста

Cкрыть часть текста

Подскажите как можно скрыть часть текста с параграфами, вот так:

206
Получить Request headers при аяксе

Получить Request headers при аяксе

можно ли получить заголовки при отправке аякса, а имеено cookies?

174