Question

我有一个发出事件的身份验证服务。当用户登录（通过LoginComponent）时，必须更新导航栏（NavBarComponent）。这些组件处于同一水平

首先我尝试使用EventEmitter，然后我读到我们不应该在服务中使用它。这是一种反模式。

所以我尝试了https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

auth.service.ts

[1]    1    3    6   10   15   21   28   36   45   55   66   78   91  105  120  136  153  171  190  210  231  253  276  300
 [25]  325  351  378  406  435  465  496  528  561  595  630  666  703  741  780  820  861  903  946  990 1035 1081 1128 1176
 [49] 1225 1275 1326 1378 1431 1485 1540 1596 1653 1711 1770 1830 1891 1953 2016 2080 2145 2211 2278 2346 2415 2485 2556 2628
 [73] 2701 2775 2850 2926 3003 3081 3160 3240 3321 3403 3486 3570 3655 3741 3828 3916 4005 4095 4186 4278 4371 4465 4560 4656
 [97] 4753 4851 4950 5050

login.component.ts

 [1]    1    3    6   10   15   21   28   36   45   55   66   78   91  105  120  136  153  171  190  210  231  253  276  300
 [25]  325  351  378  406  435  465  496  528  561  595  630  666  703  741  780  820  861  903  946  990 1035 1081 1128 1176
 [49] 1225 1275 1326 1378 1431 1485 1540 1596 1653 1711 1770 1830 1891 1953 2016 2080 2145 2211 2278 2346 2415 2485 2556 2628
 [73] 2701 2775 2850 2926

navbar.component.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);
  }
}

navbar.component.html

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();
  }
}

当我打电话

this.authService.changeConnectionState（）;

来自NavbarComponent的

，导航栏已正确更新。但是我想从loginComponent更改连接状态，然后更新导航栏。我该怎么办？

编辑：

在NavBarComponent中收到事件：

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();
  }
}

但是模板中的值未更新。我必须改变路线才能拥有'connectionState'

的正确值

Answer 1

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

您需要在共同的祖先组件或非延迟加载的@NgModule()

上提供共享服务

Answer 2

我不得不删除

提供者：[AuthService]

来自Navbar.component.ts的

它已在我的app.module.ts中设置

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

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

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

2 个答案: