Angular2 - 'watch' 多个组件中的提供者属性

Question

我来自 NG1 环境，目前正在创建具有所有可用功能的 NG2 应用程序。在问我之前，我正在探索 google 和 Whosebug 问题，但没有运气，因为 angular 2 使用 api 架构移动得如此之快，大多数答案都已过时。

我的情况：我有属性用户的 Auth 提供商（服务），我想观察用户并在多个组件（导航栏、侧边栏等）

中做出反应

我尝试了什么：

@Injectable();
export class Auth {

    private user;
    authorized: EventEmitter<boolean>;

    constructor(public router:Router){
        this.authorized = new EventEmitter<boolean>();
    }

    login(user, token):void{
        localStorage.setItem('jwt', token);
        this.user = _.assign(user);

        this.authorized.emit(<boolean>true);
        this.router.parent.navigateByUrl('/');
    }
}


/***************/
@Component({...})
export class NavComponent {

     public isAuthroized: boolean = false;

     constructor(Auth:Auth){
         Auth.authorized
             .subscribe((data) => this.onUserChanged(data));
     }

     onUserChanged(user){
        alert('USER:' + user.email);
        this.isAuthroized = true;
     }
}

/****************/
bootstrap(AppComponent, [
     ROUTER_PROVIDERS,
     ELEMENT_PROBE_PROVIDERS,
     HTTP_PROVIDERS,
     MapLoader,
     Auth
])

但没有运气。我应该使用 Observable EventEmitter 还是有其他正确的方法来处理这种情况？在 NG1 中，它就像在服务的属性上设置 $watch 一样简单。谢谢！

编辑：我向 Auth 服务添加了新方法：

...
userUpdated: EventEmitter<boolean>;

constructor(public router:Router){
    this.userUpdated = new EventEmitter<any>();
}

...

logout(returnUrl?: string): void{
    delete this.user;
    localStorage.removeItem('jwt');
    this.userUpdated.emit(undefined);

    if(!_.isEmpty(returnUrl)){
        this.router.parent.navigateByUrl(returnUrl);
    }

}

现在事件被调用了，为什么这适用于注销而不适用于登录？

编辑 2：

export class LoginPageComponent {
   error: string;

   constructor(public http: Http, public router: Router, public Auth:Auth){
   }

   login(event, email, password){
      ...
      this.http.post('/api/login', loginModel, {headers: headers})
        .map((res) => res.json())
        .subscribe((res: any) => {
            this.Auth.login(res.user, res.ADM_TOKEN);
        }, (error) => this.error = error._body);
   }

}

已解决

愚蠢的错误..我留在 NavComponent 中的提供程序数组 [Auth]..所以它是不同于全局 Auth 的对象..抱歉大家！希望这个问题对 Angular2 的新手有所帮助。感谢您的努力。

Answer 1

我假设您要将 Auth 添加为每个组件的提供者。这将为每个组件创建一个 class 的新实例。仅在 bootstrap(AppComponent, providers: [...]) 或仅在 AppComponent.

中添加

Answer 2

您会注意到 Angular 中没有监视功能，因为它现在由区域管理。

要通知其他组件，您可以在 Auth 服务中为 userUpdated 事件添加另一个 EventEmitter。需要通知的组件可以在这个发射器上注册。

@Injectable();
export class Auth {
  private user;
  authorized: EventEmitter<boolean>;
  userUpdated: EventEmitter<boolean>;

  constructor(public router:Router){
    this.authorized = new EventEmitter<boolean>();
    this.userUpdated = new EventEmitter<boolean>();
  }

  login(user, token):void{
    localStorage.setItem('jwt', token);
    this.user = _.assign(user);

    this.authorized.emit(<boolean>true);
    this.userUpdated.emit(this.user);
    this.router.parent.navigateByUrl('/');
  }
}

组件可以注册此事件：

@Component({...})
export class NavComponent {
  (...)
  constructor(Auth:Auth){
    Auth.userUpdated
         .subscribe((data) => this.onUserChanged(data));
  }
}

您还可以在发出 authorized 事件时提供用户：

  login(user, token):void{
    localStorage.setItem('jwt', token);
    this.user = _.assign(user);

    this.authorized.emit(this.user);
    this.router.parent.navigateByUrl('/');
  }
}

希望对你有帮助，蒂埃里

Angular2 - 'watch' 多个组件中的提供者属性

Angular2 - 'watch' provider property in multiple components

observable

eventemitter

angular

Angular2 - 'watch' 多个组件中的提供者 属性

Angular2 - 'watch' provider property in multiple components

observable

eventemitter

angular

Angular2 - 'watch' 多个组件中的提供者属性