javascript - Angular 2 检测其他服务的更改

Question

我有一个 AuthService，其中包含实际的用户数据和登录方法。 如果我点击“登录按钮”，我会调用 AuthService 从服务器获取新用户数据并重写“this.user”值；

因此，在标题中，我显示了用户名。

问题: 我的 HeaderComponent 如何知道 AuthService 中的 this.user 已更改？

Answer 1

好吧，您可以在 AuthService 上公开 Observable。 然后您将能够在 HeaderComponent 中订阅此流。 您可以使用扩展 RxJS Subject 类的 EventEmitter 类。此外，您可以使用 TypeScript setter 自动触发更改事件。 因此，您的代码应如下所示:

@Injectable()
export class AuthService {
    private _user: any;
    userStream: EventEmitter<any>;


    constructor() {
      this.userStream = new EventEmitter();
    }

    //code ...

    getUserData() {
      //call our setter
      this.user = newData;
    }

    set user(newValue) {
      this._user = newValue;
      //set user data and emit a value in the userStream
      this.userStream.emit(newValue);
    }
}

然后您可以在组件中使用您的服务:

@Component({...})
export class HeaderComponent {
    currentUser: any;

    constructor(private authService: AuthService) {
        //subscribe to the stream to be notified when user data has changed
        authService.userStream.subscribe((newUser) => { this.currentUser = newUser; });
    }
}

因此您将能够监听用户数据的更改。