首页 文章

Angular 4 | “通知”组件执行操作

提问于
浏览 次
0

我有一个导航栏组件，我使用 "< app-navbar >" 括号注入我的应用程序，所以它始终加载，即使有路线更改 .

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

问题是我不知道如何“通知”我的导航栏组件从本地存储中获取用户名，以便显示它 .

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

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

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

angular

2 回答

  • 0

    我会说使用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);
    });
  }

}

    现在，当您在服务中注入/发出用户时，在您的nav-bar 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

    回复于
  • 3

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

    或者，不要在应用程序中全局使用 <nav-bar> 组件，而是可以将 <nav-bar> 组件添加到各个路径 .

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

    回复于

相关问题