无法从 Angular 中的 Service 获取值

Question

我已经创建了具有登录功能的应用程序，并且想要在组件中获取登录的用户名

服务文件：

  login({ username, password }: any): Observable<any> {
if (username === '[email protected]' && password === 'admin123') {
  this.setToken('abcdefghijklmnopqrstuvwxyz');
  **this.username1 = username;**
  this.setUserName(username);
  return of({ name: 'Papun Sahoo', email: '[email protected]' });
}
return throwError(new Error('Failed to login'));

}

在组件上我试图访问该值

userName?:string;
  constructor(private observer: BreakpointObserver, private router: Router,private loginService: LoginService) {
    **this.userName = this.loginService.getUserName()!;**
    console.log("From Component :"+this.loginService.username1);
  }

但我在这里得到了未定义

来自组件：未定义

StackBlitz 链接重现

如有任何帮助，我们将不胜感激

Answer 1

您将提供 LoginService 两次，一次通过服务类上的 @Injectable 装饰器在 root 中提供，另一次在提供者数组中的 AdminModule 中提供。从 AdminModule 中的提供程序中删除 LoginService 可以解决该问题。

提示：您可以通过将服务注入自身来防止服务的多个实例：

export class LoginService {
  constructor(
    ...
    @Optional() @SkipSelf() private parentLoginService?: LoginService,
  ) {
    if (parentLoginService) {
      throw new Error('Multiple instances of LoginService created!');
    }
  }
  ...
}