Question

我有一个导航栏组件，我使用"< app-navbar >"括号将其注入我的应用程序，因此它会一直加载，即使路径发生变化也是如此。

我有一个登录系统，用户可以将我的后端服务器重定向到我的前端服务器以及一些URL参数。组件（localhost:4200/auth/steam）负责将这些参数保存在本地存储中，并在成功时将用户重定向到我的前端主页（localhost:4200/）。现在用户已登录，我想在导航栏中显示他的用户名。

问题在于我不知道如何通知＆＃34;我的导航栏组件从本地存储中获取用户名，以便显示。

这样做的优雅方式是什么？

顺便说一句：对不起，如果这个问题有点难以理解，我就不知道如何更好地解释它。

BTW2：我不认为代码示例是必要的，因为这是一个普遍的问题。如果您需要以下评论

Answer 1

我会说使用Observable并在用户服务有更新时通知您的导航栏。

因此，当用户对象/变量

发生更改时，您的用户服务将发出事件

@Injectable()
export class UserService {
  private user: ReplaySubject<UserAuthorizations> = new ReplaySubject<UserAuthorizations>();
  get user() {
    return this._user.asObservable();
  }


  constructor() {
  }

  getCurrentUser(username?: string, password?: string): Observable<UserAuthorizations> {
      this.user.next('=>'+username+'-'+password);
    });
  }

}

现在，当您在服务中注入/发出用户时，在导航栏component中，subscribe用户变量，并且当用户对象发生更改时，它将更新。

export class myComponent {

    constructor(private userService: UserService) {
     userService.user.subscribe((usr) => { 
       this.userdisplay = user.name;
     });
    }

}

官方角度文件：https://angular.io/guide/component-interaction#component-interaction

Answer 2

您可以使用其他人发布的主题和可观察组合。

或者不是在应用中全局使用<nav-bar>组件，您可以将<nav-bar>组件添加到各个路由。

这样，<nav-bar>组件将在路由更改时被销毁，并再次初始化。在init上，您可以从本地存储中获取用户名并使用插值进行设置。

Angular 4 | ＆＃34;通知＆＃34;用于执行操作的组件

2 个答案: