Угловой 2 - Событие от службы к компоненту на том же уровне

Question

У меня есть служба аутентификации, которая испускает событие. Когда пользователь входит в систему (через LoginComponent), навигационная панель должна обновляться (NavBarComponent). Эти компоненты находятся на одном уровне

Сначала я попытался использовать EventEmitter, после чего прочитал, что мы не должны использовать его в сервисе. Это анти-шаблон.

Так что я попытался https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

auth.service.ts

import {Injectable}  from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class AuthService { 

    private connectionState: boolean; 
    private stateChangeSource = new Subject<boolean>(); 
    // Observable boolean stream 
    stateChange$ = this.stateChangeSource.asObservable(); 

    constructor(private http: Http) { 
    } 

    changeConnectionState() { 
    this.stateChangeSource.next(!this.connectionState); 
    } 
} 

login.component.ts

import {Component, Inject} from '@angular/core'; 
import {AuthService} from './auth.service'; 

@Component({ 
    selector: 'login-component', 
    templateUrl: './login.component.html' 
}) 
export class LoginComponent { 

    constructor(private authService: AuthService) { 
    this.authService = authService; 
    } 

    login() { 
    this.authService.changeConnectionState(); 
    } 
} 

navbar.component.ts

import {Component} from '@angular/core'; 
import {AuthService} from './auth.service'; 

@Component({ 
    selector: 'navbar', 
    templateUrl: './navbar.component.html', 
    providers: [AuthService] 
}) 
export class NavbarComponent { 

    authService: AuthService; 
    connectionState: boolean; 
    subscription: any; 

    constructor(private authService: AuthService) { 
    this.authService = authService; 
    this.subscription = authService.stateChange$.subscribe(
     value => { 
     this.connectionState = value; 
     }) 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 
} 

navbar.component.html

<nav class="navbar navbar-default navbar-fixed-top"> 
... 
    <a *ngIf="!connectionState" [routerLink]="['/login']">Connect</a> 
    <a *ngIf="connectionState" (click)="disconnect()">Disconnect</a> 
...  
</nav> 

Когда слово

this.authService.changeConnectionState();

от NavbarComponent, навигатор правильно обновлен. Но я хотел бы изменить состояние соединения из loginComponent, а затем обновить навигационную панель. Как я могу сделать ?

EDIT:

Событие получено в NavBarComponent:

this.subscription = authService.stateChange$.subscribe(
     value => { 
     this.connectionState = value; 
     }) 

Но значение не обновляется в шаблоне. Мне нужно изменить маршрут, чтобы иметь правильное значение «connectionState»

Answer 1

мне пришлось удалить

поставщиков: [AuthService]

от Navbar.component.ts

Было уже установлено в моем app.module.ts

@NgModule({ 
    imports: [ 
    BrowserModule 
    ], 
    declarations: [ 
    LoginComponent 
    ], 
    providers: [ 
    AuthService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

У меня была еще одна ошибка из-за моего асинхронного вызова для входа в систему (не указано в этом сообщении), и я не знаю почему. Но это не предмет.

Answer 2

Если компоненты находятся на одном уровне, то вы не можете предоставить услугу между ними, которая предоставляется на одном из них.

Вы должны предоставить общую службу по общему компоненту предков, или не-ленивым загружены @NgModule()