Я новичок в Angular 2 и RXJS. У меня есть настраиваемый компонент заголовка с двумя триггерами (кнопками), которые должны активировать 2 разных навигационных указателя в разных частях приложения. Я создал службу, которая регистрирует две разные навигационные директивы, и компонент заголовка подписывается на это. Я хотел знать, как лучше всего связать кнопки в заголовке, чтобы вызвать функции open() и close() в каждой из директив в зависимости от щелчка триггера.Угловой 2 Сервис + RxJS BehaviorSubject или EventEmitter
ПРИМЕЧАНИЕ. Обратите внимание: я не могу использовать ViewChild или ContentChild, потому что навигация может быть где угодно на странице. Они могут быть в другом компоненте CustomComponent и не обязательно являются дочерними элементами компонента заголовка.
я могу думать о 2-х вариантов:
- Создайте 2 отдельные Наблюдаемые/BehaviorSubjects для 2-х навигационных указаний на службе, и пусть заголовок проходят открытые и близкие им сообщения и иметь отдельные директивы навигации подписаться к каждой из соответствующих наблюдаемых.
- Используйте EventEmitters, но я не уверен, как использовать этот подход.
Не могли бы вы предложить хороший способ решить эту проблему?
пользовательского компонента, содержащего Навигация:
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<my-custom-header>
This is some text inside the header
</my-custom-header>
<nav custom-nav-1>Custom Nav 1</nav>
<nav custom-nav-2>Custom Nav 2</nav>
`
})
export class AppComponent {
title = 'Hello!';
}
Заголовок компонента:
@Component({
selector: 'my-custom-header',
template: `
<div class="container">
This is a header
<ng-content></ng-content>
<div>Number of Nav Registered: {{noOfNav}}</div>
<button type="button" (click)="toggleNav1()">Toggle Nav 1</button>
<button type="button" (click)="toggleNav2()">Toggle Nav 2</button>
</div>
`,
styles: ['.container { border: 1px solid; }'],
})
export class HeaderComponent {
title = 'Hello!';
noOfNav = 0;
constructor(private navService: NavService) {}
ngOnInit() {
this.navService._navSubject.subscribe({
next: (id) => {
if(id!=0) {
this.noOfNav++;
}
}
});
}
toggleNav1() {
console.log("Toggle Nav 1");
}
toggleNav2() {
console.log("Toggle Nav 2");
}
}
NavService:
@Injectable()
export class NavService {
public _navSubject: BehaviodSubject = new BehaviorSubject<number>(0);
registerNavId(id: number) {
this._navSubject.next(id);
}
}
Nav1Directive
@Directive({
selector: '[custom-nav-1]'
})
export class NavDirective1 {
constructor(private navService: NavService) {}
ngOnInit() {
this.navService.registerNavId(1);
}
isOpen() {
console.log("isOpen");
}
open() {
console.log("Open Nav");
}
close() {
console.log("Close Nav");
}
}
Nav2Directive:
@Directive({
selector: '[custom-nav-2]'
})
export class NavDirective2 {
constructor(private navService: NavService) {}
ngOnInit() {
this.navService.registerNavId(2);
}
isOpen() {
console.log("isOpen");
}
open() {
console.log("Open Nav 2");
}
close() {
console.log("Close Nav 2");
}
}
Plunker: https://plnkr.co/edit/3ISyH7ESoNlt65J56Yni?p=preview
Так в чем проблема? – micronyks
Я хочу знать, что лучше всего подходит для решения этой проблемы. Наблюдаемый способ, способ EventEmitter или какой-либо другой подход? – takeradi
Работает ли она так, как ожидалось? Я не вижу ничего, когда я нажимаю две кнопки. – micronyks