Javascript 数据更改时重新加载9个组件元素

我使用的是Angular 9，我想在用户登录时动态更改菜单项的数据。但是，由于菜单与主页一起加载，因此当用户登录时，数据更改不会反映在菜单项中，直到我手动刷新页面。我尝试使用Renderer 2、ChangeDetectorRef和ElementRef，但未能自动重新加载菜单。下面我只添加相关元素，因为实际的组件代码很长。如果您还需要了解其他信息，请询问我：

Html:

---

在创建页面期间，构造函数只执行一次

constructor(public router: Router, private cartService: CartService, public sidenavMenuService:SidebarMenuService) {
    this.checkLogin();
    this.name = Cookie.get('userName');
  }

现在，根据代码，如果在构建过程中找不到cookie

authtoken

，您的应用程序将无法知道它是否是由另一个（登录）进程创建的

---

您应该在登录完成后立即调用

checkLogin

函数和

name

分配。

当您登录登录的guard（即auth guard）时，您不需要让事情变得复杂

因此，在重定向之后，当您在仪表板页面上着陆时，在仪表板组件中，您还插入了sideMenu服务并订阅了Behavior Subject菜单数据字段

public name;
public isLoggedIn = false; // here you don't need to check login
                        // because you come here from auth guard
  constructor(public router: Router, private cartService: CartService, 
   public sidenavMenuService: SidebarMenuService) {
   this.checkLogin();  // same no need to check login in each 
                         component if you use auth guard 

   this.name = Cookie.get('userName');
}

public ngOnInit(){
  this.sideMenuService.sideMenuData.subscribe((data)=>{
    // hered you get the data dynamic , you can assign to any 
    // component field.
 });
}
 public checkLogin(): any {
    if(Cookie.get('authtoken')) {
    this.isLoggedIn = true;
 }

}

因此，每当您每次发送一些动态数据并登录时，您的行为主题都将得到更新，并且无论您在哪里订阅，如在仪表板组件中，您都将获得动态数据

---

希望能有所帮助。

模板中您想更改的菜单项是什么？您在

构造函数中的任何代码都可以移动到
ngOnInit
或
ngOnChange
@Charlie如果变量isLoggedIn=true，则mat按钮应该从Account更改为Howdy，{{name}@Benny没有改变任何东西您的
checklogin
函数在构造函数中。它应该在您的登录代码之后立即执行。。
constructor(public router: Router, private cartService: CartService, public sidenavMenuService:SidebarMenuService) {
    this.checkLogin();
    this.name = Cookie.get('userName');
  }

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
  
  constructor(public auth: AuthService, public router: Router , private sideMenuService: SideMenuService) {}
  
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.sideMenuService.sideMenuData.next({...data});  // so here you can dispatch the side menu service data . 
      this.router.navigate(['dashboard']); // here after authentication it 
                                             will redirect to your dashboard 
                                             page
      return false;
     }
   return true;
   } 
 }
  
} 

public name;
public isLoggedIn = false; // here you don't need to check login
                        // because you come here from auth guard
  constructor(public router: Router, private cartService: CartService, 
   public sidenavMenuService: SidebarMenuService) {
   this.checkLogin();  // same no need to check login in each 
                         component if you use auth guard 

   this.name = Cookie.get('userName');
}

public ngOnInit(){
  this.sideMenuService.sideMenuData.subscribe((data)=>{
    // hered you get the data dynamic , you can assign to any 
    // component field.
 });
}
 public checkLogin(): any {
    if(Cookie.get('authtoken')) {
    this.isLoggedIn = true;
 }