Angular 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 更改连接状态，然后更新导航栏。我该怎么办？

编辑 :

在 NavBarComponent 中收到事件：

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

但是模板中的值没有更新。我必须更改路线才能获得 'connectionState'

的正确值

Answer 1

如果组件处于同一级别，则您无法在它们之间共享其中一个组件提供的服务。

您需要在共同的祖先组件或 non-lazy-loaded @NgModule()

上提供共享服务

Answer 2

我不得不删除

providers: [AuthService]

来自 Navbar.component.ts

我的app.module.ts

已经设置好了

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

由于我对登录的异步调用（未在此 post 中详细说明），我遇到了另一个错误，我不知道为什么。但这不是主题。

Angular 2 - 从服务到同一级别组件的事件

Angular 2 - Event from service to component at same level

angular

events

login

angular-services

angular-components