Angular 2 检测来自另一个服务的更改答案

【问题标题】：Angular 2 Detect changes from another serviceAngular 2 检测来自另一个服务的更改
【发布时间】：2017-02-10 19:55:31
【问题描述】：

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

所以，在标题中，我显示了用户名。

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

【问题讨论】：

标签： javascript angular typescript rxjs

【解决方案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; });
    }
}

因此您将能够监听用户数据的变化。

【讨论】：

仅供参考，this answer 建议不应以这种方式使用 Angular 2 EventEmitter。你可以改用 RxJS Subject。