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

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

某处

# 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));

Answer 2

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

1. 它为您正在扩展的所有功能提供了一个干净的界面；因此，如果您决定稍后更改实现，则无需查找所有调用站点即可执行此操作。

2. 同样，您可以在运行时轻松交换实现，以便模拟服务。例如，您可以创建在非生产模式下使用的MockLoginService，它会打印调试数据并访问本地服务器而不是生产服务器。

3. 您可以使用依赖注入，因此在任何给定模块中都可以轻松访问它。