Добавить данные в поток
Здравствуйте, уважаемые.
Не могу совладать с 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, время: 02:50. |