Добавить данные в поток
Здравствуйте, уважаемые.
Не могу совладать с RxJS. Следующая ситуация: объявляю переменную и слушаю события роутера. Потом, когда они появляются, на основе URL роутера строю хлебные крошки. Проблема состоит в том, чтобы проинициализировать состояние крошек в момент запуска приложения. Подскажите пожалуйста, как это сделать. Код погрызен чтобы оставить суть происходящего. Компонент: export class BreadcrumbsComponent implements OnInit, OnDestroy { breadcrumbs$: Observable<any>; constructor( private router: Router ) { } ngOnInit(): void { this.breadcrumbs$ = this.router.events .pipe( filter(event => event instanceof NavigationEnd), distinctUntilChanged(), map( () => this.buildBreadCrumb( this.router.url) ); // Здесь как-то впихнуть результаты вызова buildBreadCrumb с текущим URL в this.breadcrumbs$ } buildBreadCrumb(url: string): BreadCrumb[] { let breadCrumbs: BreadCrumb[] = []; ... breadCrumbs = [newCrumb, ...this.buildBreadCrumb(url)]; return breadCrumbs; } } Щаблон: <ul class="breadcrumb"> <li *ngFor="let breadcrumb of breadcrumbs$ | async"> <a [routerLink]="['/' + breadcrumb.path ]">{{ breadcrumb.name }}</a> <i class="fas fa-angle-right"></i> </li> </ul> |
Нужно breadcrumbs$ объявить как BehaviorSubject и в него прокидывать результат вызова buildBreadCrumb при старте приложения. Ну и this.router.events.pipe(...).subscribe(this.breadc rumbs$)
|
Я сделал так:
breadcrumbs$: Subject<any> = new Subject<any>(); ngOnInit(): void { this.routerSubscription = this.router.events.pipe( filter(event => event instanceof NavigationEnd), distinctUntilChanged(), map( () => this.buildBreadCrumb(...)) ).subscribe( (data) => this.breadcrumbs$.next(data) ); // Силком пихнем начальное состояние крошек оложив отправку в поток на время инициализации компонента setTimeout( () => { this.breadcrumbs$.next(this.buildBreadCrumb( ... )); }, 300); } |
Часовой пояс GMT +3, время: 20:07. |