Angular 2 Service + RxJS BehaviorSubject或EventEmitter

问题描述：

我是Angular 2和RXJS的新手。我有一个带有2个触发器（按钮）的自定义头部组件，它应该在应用程序的不同部分激活2个不同的导航指令。我创建了一个服务，它注册了2个不同的导航指令，并且标头组件订阅了这个。我想知道什么是链接标题中按钮的最佳方法，以根据点击的触发器调用每个指令中的open（）和close（）函数。Angular 2 Service + RxJS BehaviorSubject或EventEmitter

注意：请注意，我无法使用ViewChild或ContentChild，因为导航可以位于页面上的任何位置。它们可以位于不同的CustomComponent中，不一定是标头组件的子项。

我能想到的2种选择：

创建在服务中2个导航指令，2个独立的观测量/ BehaviorSubjects，让头通过打开和关闭的消息给他们，并有单独的导航指令订阅给每个相应的观察者。
使用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

我想知道最好的方法来解决这个问题。 Observable方式，EventEmitter方式还是其他方法？ – takeradi

它按预期工作吗？我点击两个按钮时看不到任何东西。 – micronyks

答

由于你的组件是松耦合的（不知道对方），你需要它们之间的相互作用，你的方法（使用RxJS）是大多数对应于angular2的方法。

现在一切都变得活跃，甚至形式。

当您从可重用组件输出事件时，EventEmitter很好，而且很简单。

Angular 2 Service + RxJS BehaviorSubject或EventEmitter

相关推荐