@MrPhelko
.Net Full Stack Developer

Angular 5 использование статических данных в layout?

Всем привет у меня есть роуты
path: '',
        component: AppLayoutComponent,
        children: [
            { path: '', component: ProgramsComponent, canActivate: [AuthGuard], data: { display: 'main_page' } },
            { path: 'profile', component: AccountProfileComponent, canActivate: [AuthGuard], data: { display: 'profile' } },
            { path: 'promocode', component: AccountPromocodeComponent, canActivate: [AuthGuard], data: { display: 'program' } },
        ]


в каждой странице есть компонент, который подписан на data.display и все работает, но из-за оптимизации этот компонент перенесен в AppLayoutComponent и он перестал видеть data.display, как это можно разрулить?
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
@MrPhelko Автор вопроса
.Net Full Stack Developer
Решил таким путем, вдруг кому-то понадобиться
Написал DataDisplayService который подписан на событие смены страницы у Route
при изменение параметра display я вызываю событие
получилось даже лучше чем было
вот пример:

import { Injectable } from '@angular/core';
import { Router, NavigationEnd, PRIMARY_OUTLET } from '@angular/router';
import { Subscription, Subject } from 'rxjs';
import { filter, map, flatMap } from 'rxjs/operators';



@Injectable()
export class DataDisplayService {

    sub: Subscription;
    display: string;

    private displaySubject = new Subject<string>();
    displayOb = this.displaySubject.asObservable();

    constructor(private router: Router) {
        this.sub = this.router.events.pipe(
            filter(event => event instanceof NavigationEnd),
            map(_ => this.router.routerState.root),
            map(route => {
                while (route.firstChild)
                    route = route.firstChild;

                return route;
            }),
            flatMap(route => route.data))
            .subscribe(data => {
                let display = data['display'];

                if (this.display !== display) {
                    this.display = display;
                    this.displaySubject.next(display);
                }
            });
    }

}


а в нужно компоненты просто подписался
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы