서비스를 통한 부품 상호 작용이 Angular2에서 작동하지 않습니다.

Question

다른 구성 요소에서 기능이 트리거되는 경우 한 구성 요소에서 값을 설정하려고합니다. 그러나 작동하지 않습니다. I am using the approach given in this post

로그인 버튼을 누른 후에 만 ​​내 사이드 ​​바를 표시하고 싶습니다. 내 sidebar.component.ts이 같은 새 값을받을 것입니다 구성 요소에 가입
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); 
     } 

} 

다음 :

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의 값이 emit 이벤트에 가입되어 있으므로 변경된 즉시 업데이트해야합니다. 그렇지 않으면 안됩니까?

당신은 서비스의 두 인스턴스를 제공해야 당신의 도움 :)

Answer 1

주셔서 감사합니다, ComponentInteractionService는