Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Добавить данные в поток (https://javascript.ru/forum/angular/77906-dobavit-dannye-v-potok.html)

sniffysko 01.07.2019 11:00

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

destus 01.07.2019 20:34

Нужно breadcrumbs$ объявить как BehaviorSubject и в него прокидывать результат вызова buildBreadCrumb при старте приложения. Ну и this.router.events.pipe(...).subscribe(this.breadc rumbs$)

sniffysko 02.07.2019 09:20

Я сделал так:
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, время: 23:41.