Angular 行为主题订阅。用户登录和注销后调用组件中的方法

Question

我有一个带有 header 和页脚的 angular 布局。我想根据只读或分析师等用户角色更新导航菜单的加载。我在 SO 上看到了 post 并复制了 header 组件的 BehaviorSubject 代码以订阅服务中的布尔值更改。这有效，但我只有一个登录按钮更改为注销按钮。在我的 header 组件 ts 代码中，我有一个方法可以根据用户的角色加载菜单。它获取菜单路径列表并仅加载适合用户角色的菜单项。因此，除了使用 *ngIf 来根据订阅的布尔值更改更改隐藏之外，是否有一种方法可以在 header 组件收到发出的更改通知时从订阅的更改中调用方法？

感谢任何帮助。谢谢

到目前为止，这是我的 header 组件 ts 代码：

export const ROUTES: RouteInfo[] = [
  { path: '/Home', title: 'Home', icon: '', class: '', role: 'all'},

  // admin
  { path: '/change-role', title: 'Change Role', icon: '', class: '', role: 'admin'},
  { path: '/users', title: 'User', icon: '', class: '', role: 'admin'},
  { path: '/products', title: 'products', icon: '', class: '', role: 'admin'},
  { path: '/admin', title: 'Admin', icon: '', class: '', role: 'admin'},
];

  constructor(private dataSharingService: DataSharingService, private loginService: LoginService, private router : Router)  { 
      this.dataSharingService.isUserLoggedIn.subscribe( value => { this.isUserLoggedIn = value })
  }

  ngOnInit() {
    //this.getLoginStatus();
    this.loadMenus();

  }

  loadMenus()
  {
      var role = this.loginService.getUserRole();
      if (role == 'admin') {
        this.menuItems = ROUTES.filter(menuItem => menuItem.role == 'admin');
      }
      else if (role == 'analyst' || role == 'reviewer') {
        this.menuItems = ROUTES.filter(menuItem => menuItem.role == 'reviewer');
      }
      else if (role == ' readOnly') {
        this.menuItems = ROUTES.filter(menuItem => menuItem.role == 'readOnly');
      }

    }
  }

Answer 1

我想这就是你想要做的。

this.dataSharingService.isUserLoggedIn.subscribe(value => {
  this.isUserLoggedIn = value;
  this.loadMenus();
});

Angular 行为主题订阅。用户登录和注销后调用组件中的方法

Angular BehaviorSubject Subscribe. Call method in component after user login and logout

angular

behaviorsubject