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

【问题标题】：How to reload the main component after redirecting to the another page Angular 7重定向到另一个页面Angular 7后如何重新加载主要组件
【发布时间】：2019-04-21 18:19:52
【问题描述】：

在登录仪表板加载到该页面后，我有一个 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

【解决方案1】：

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

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

当然，您需要注入具有路由器类型的路由器。

constructor(private router: Router) {}

【讨论】：

【解决方案2】：

除了@hayk 的方法之外，您甚至可以创建一个BehaviorSubject，它可以被主要组件订阅。

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

这样做的好处是不仅可以在登录后调用服务方法，还可以在其他各种场景中调用

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

【讨论】：