通过服务进行的组件交互在 Angular2 中不起作用

Question

如果在另一个组件中触发了某个功能，我正在尝试在一个组件中设置一个值。 但是，我无法让它工作。 I am using the approach given in this post

我希望我的侧边栏仅在按下登录按钮后显示。

我写了一个这样的服务组件：
component-interaction.service.ts

import { EventEmitter, Output } from '@angular/core';
import { Injectable } from '@angular/core';

@Injectable()
export class ComponentInteractionService {

        showSidebarEmitter: EventEmitter<any> = new EventEmitter();

        setSidebar(showSidebar:boolean){
            this.showSidebarEmitter.emit(showSidebar);
        }

}

然后我在我的sidebar.component.ts 中订阅可以接收新值的组件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ComponentInteractionService } from '../services/component-interaction.service';

@Component({
  moduleId: module.id,
  selector: 'app-sidebar',
  templateUrl: 'sidebar.component.html',

  styleUrls: ['sidebar.component.css'],
   providers: [ ComponentInteractionService ]
})

export class SidebarComponent implements OnInit {
  showSidebar: boolean = false;

  constructor(private _router: Router,  private _componentInteractionService: ComponentInteractionService) { }

  ngOnInit() {
      this._componentInteractionService.showSidebarEmitter.subscribe(res =>this.showSidebar = res);

  }

}

我正在我的login.component.ts 中设置值，如下所示：

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { Observable } from 'rxjs/Rx'; 
import { ComponentInteractionService } from '../services/component-interaction.service';

@Component({  
  moduleId: module.id,
  selector: 'app-login',
  templateUrl: 'login.component.html',
  styleUrls: ['login.component.css'],
  providers: [ ComponentInteractionService ]
})
export class LoginComponent implements OnInit {

  login(){
   this._componentInteractionService.setSidebar(true);
  }
}

现在，由于我的 sidebar.component.ts 中的值订阅了发出事件，它应该在更改后立即更新，不是吗？

感谢您的帮助:)

Answer 1

您已经提供了两个服务实例，ComponentInteractionService 必须只在一个提供者中（例如在 AppComponent 中）