Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.07.2019, 11:00
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 79

Добавить данные в поток
Здравствуйте, уважаемые.
Не могу совладать с 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>
Ответить с цитированием
  #2 (permalink)  
Старый 01.07.2019, 20:34
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Нужно breadcrumbs$ объявить как BehaviorSubject и в него прокидывать результат вызова buildBreadCrumb при старте приложения. Ну и this.router.events.pipe(...).subscribe(this.breadc rumbs$)
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2019, 09:20
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 79

Я сделал так:
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);
	}
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
XeteData: Собрать данные | Добавить данные - Любой формат, Любой источник xetedata Работа 4 04.01.2018 18:34
Как обновлять данные сервера и не выводить их повторно? Zamay jQuery 1 10.03.2017 00:43
Взять данные из поля input(text) и добавить к содержимому div (text input + text div) ksultanov Элементы интерфейса 4 04.10.2016 19:46
Нужно добавить еще одно поле <input> sergofedor06 Javascript под браузер 20 17.09.2016 00:31
Как в объет добавить данные. Evgeny_Dedov Javascript под браузер 4 04.08.2016 15:55