Question

我希望了解将登录后生成的用户对象传递给其他组件的最佳方法是什么。

 login() {
this.http.post<Usuario>(this.baseUrl, {
  username: this.usuario.username,
  clave: this.usuario.clave
}).subscribe(data => {
  if (data != null) {
    localStorage.setItem('isLoggedIn', 'true');
    localStorage.setItem('token', btoa(this.usuario.username + ':' + this.usuario.clave));
    this.router.navigate(['/buscador']);
    this.usuario2 = data;
    console.log(this.usuario2);

  } else {
    alert('Authentication failed.');
  }
});}

这是我登录组件中的登录方法，如果验证正确，因为我使用的服务返回了一个用户对象，则将该用户对象存储到“ usuario2”中，我想知道这是最好的方法以便其他组件可以访问此变量。

Answer 1

我认为最好的开发模式是创建LoginService，该服务包含用于身份验证/本地存储（https://angular.io/guide/architecture-services）的所有逻辑。服务模式有益的原因很多；

它为您扩展的所有功能提供了简洁的界面；因此，如果您决定稍后更改实现，则可以在不取消所有调用站点的情况下执行此操作。
同样，您可以在运行时轻松地交换实现，以便可以模拟服务。例如，您可以创建在非生产模式下使用的MockLoginService，它会打印调试数据并命中本地而不是生产服务器。
您可以使用依赖项注入，因此可以在任何给定模块中轻松访问它。

Answer 2

类似的地方

# Simple passing of data between components using a dedicated data service

export class LoginService {

  username: string;

  getUsername(): string {
    return this.username;
  }

  setUserName(username: string) {
    this.username = username
  }

}

# Using a behavior subject so other active components are updated with the new value whenever it changes.

export class LoginService {

  username: BehaviorSubject<string> = new BehaviorSubject<string>("");;

  watchUsername(): BehaviorSubject<string> {
    return this.username;
  }

  setUserName(username: string) {
    this.username.next(username);
  }

}

# You can then consume the Behavior subject like this

this.loginService.watchUserName.subscribe(val => console.log(val));

在兄弟姐妹之间传递对象的最佳方法Angular 6

2 个答案: