如何在重定向到另一个页面Angular 7后重新加载主组件

问题描述 投票:0回答:2

登录仪表板加载到该页面后,我有一个Angular页面。我在应用程序组件中有标题,并且从浏览器的本地存储中加载了一些详细信息。但在路由到仪表板后,标题图标未加载,因为我已将ngIf条件设置为标题图标,如下所示

<button
      *ngIf="isLoggedIn == 'true'"
      mat-icon-button
      (click)="snav.toggle()"
    >
      <mat-icon style="color:white;">menu</mat-icon>
    </button>

如果本地存储LoggedIn值为true,则只有此按钮可见。

但在我的情况下,在我的登录组件中点击登录按钮后,它调用一个服务,并从那里我设置了本地存储值。

if (res1["retFlag"] === "0") {
            this.http
              .post("http://213.136.79.138:8080/gdp/login", obj, httpOptions)
              .subscribe(
                res => {
                  console.log(res);
                  // console.log('userid' + '' + res['userid']);

                  // tslint:disable-next-line:no-string-literal
                  if (res["returnFlag"] === 0) {
                    // tslint:disable-next-line:no-string-literal
                    const userid = res["loginEmployeeId"];
                    const username = res["username"];
                    localStorage.setItem("userid", userid);
                    localStorage.setItem("isLoggedIn", "true");
                    localStorage.setItem("username", username);
                    console.log(username);
                    // console.log('signed in log val:' + localStorage.getItem('isLoggedIn'));

                    //window.location.href = "./dashboard";

                    //this.router.navigate(["dashboard"]);

                    // var url = '@Url.Action("Action", "/dashboard")';
                    // window.location.href = url;

                    this.router.navigateByUrl("dashboard");

                    // this.router.navigate(['dashboard']);
                  } else {
                    alert("Username or Password Incorrect");
                  }
                },
                err => {
                  // this.loading = false;
                  console.log(err);
                }
              );
          } else {
            alert("UserName Not Available");
          }
        },
        err => {
          // this.loading = false;
          console.log(err);
        }
      );

但问题是重定向后标头没有刷新。

如果我使用window.location.href =“dashboard”在本地开发服务器上正常工作。但是当托管到tomcat时,它无法正常工作。有人可以建议解决这个问题

angular redirect
2个回答
1
投票

除了@ hayk的方法,你甚至可以创建一个BehaviorSubject,可以由主要组件订阅。

除了解决您的问题之外,我建议您将登录过程实现为一项服务,该服务不仅具有登录逻辑,还具有令牌刷新逻辑(我相信您也希望实现它)

这样做的好处是,您不仅可以在登录后调用服务方法,还可以调用各种其他方案

  1. 每当从服务器获取数据时验证登录令牌
  2. 通过订阅app.component中的事件更改来切换路由
  3. 如果您有一些管理员级别的组件,首先检查提升的访问权限然后激活路由,请使用CanActivate路由保护。

0
投票

如果我正确理解您的问题,其中一个解决方案是订阅路由器事件并做任何您想做的事情。它看起来像这样

this.router.events.subscribe(val => {
    // do what you want
    // ...
});

当然,你需要注入具有路由器类型的路由器。

constructor(private router: Router) {}
© www.soinside.com 2019 - 2024. All rights reserved.