Question

我的angular 6应用程序出现问题，刷新后返回到根目录。我发现问题出在哪里，但我不知道如何更改或添加代码。

import { Component, OnInit } from "@angular/core";
import * as firebase from "firebase";
import { Router } from "@angular/router";
import { UserService } from "../../service/user.service";

@Component({
  selector: "app-navbar",
  templateUrl: "./navbar.component.html",
  styleUrls: ["./navbar.component.css"]
})
export class NavbarComponent implements OnInit {
  isLoggedIn: boolean = false;
  name: string;
  email: string;
  uid: string;
  spec: string;
  constructor(private userService: UserService, private router: Router) {}

  ngOnInit() {
    this.userService.statusChange.subscribe(userData => {
      if (userData) {
        this.name = userData.name;
        this.email = userData.email;
        this.uid = userData.uid;
        this.spec = userData.spec;
      } else {
        this.name = null;
        this.email = null;
        this.uid = null;
        this.spec = null;
      }
    });

    firebase.auth().onAuthStateChanged(userData => {
      if (userData) {
        this.isLoggedIn = true;
        console.log("user is login");
        const user = this.userService.getProfile(); 
        if (user && user.name) {
          this.name = user.name;
          this.email = user.email;
          this.uid = user.uid;
          this.spec = user.spec;
        }
        this.router.navigate(["/"]);// **REFRESH PROBLEM**
      } else {
        this.isLoggedIn = false;
        console.log("user is logout");
        this.router.navigate(["/login"]);
      }
    });
  }
  onlogout() {
    firebase
      .auth()
      .signOut()
      .then(() => {
        this.userService.remove();
        this.isLoggedIn = false;
      });
  }
}

例如，如果我在this.router.navigate（[“ /”]）中添加一些路由，它将始终重定向到该新根目录，但是如果我删除所有路由，它将再次返回到根目录。也许本地存储可以提供帮助，但是我不知道如何实现：（

已更新 路由模块

  RouterModule.forRoot([
      {
        path: "",
        component: DashboardComponent,
        canActivate: [AuthGuardService]
      },
      { path: "login", component: LoginComponent },
      { path: "register", component: RegisterComponent },
      {
        path: "pacijent/:id",
        component: PacijentComponent,
        canActivate: [AuthGuardService]
      },

      {
        path: "pacijent/:id/edit",
        component: PacijentEditComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "novi-pacijent",
        component: NoviPacijentComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "istorija/:id/:id",
        component: NalazComponent,
        canActivate: [AuthGuardService]
      },
      { path: "**", component: NotfoundComponent }
    ])
  ],

Answer 1

"/" 将始终把您带到根。

您要降落的正确路径。

Ex：

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

Answer 2

如果您希望刷新后进入当前页面，请使用this.router.url

您可以将this.router.navigate(["/"]);替换为this.router.navigate([this.router.url]);

Answer 3

您能做的最好的就是留在当前路线上

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

将重新加载路由，但是必须将复用路由策略设置为false才能强制重新加载路由。

如果您希望与之一起传递任何查询参数

let params = ...; // define query params

this.router.navigate([""], params);

刷新后的Angular 6应用重定向到root

3 个答案: