Question

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

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

问题：我的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; });
    }
}

因此，您可以收听用户数据的更改。

Angular 2检测来自其他服务的更改

1 个答案: