默认情况下如何导航到子路由 - Angular 7 (Routes)

Question

我正在使用 Angular 路由来浏览组件。当用户登录时，他们会导航到dashboard/:id，然后他们会看到dashboard/123/projects 等。问题是，当用户仅导航到/dashboard 时，我想默认将他们重定向到/dashboard/:id。但是当我这样做时：{ path:"dashboard", redirectTo:"dashboard/:id/projects", pathMatch:"full"} 它通过一个错误说:id 未定义，我无法从/dashboard 导航到当前登录/dashboard/123/projects 的用户。

我的 Routes.modules.ts 代码

const routes: Routes = [{
    path: "",
    redirectTo: "/login",
    pathMatch: "full"
  },
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "register",
    component: RegisterComponent
  },
  //the problem goes here
  {
    path: "dashboard",
    redirectTo: "", //How to redirect to dashboard/:id ?
    pathMatch: "full"
  },
  {
    path: "dashboard/:id",
    component: DashboardComponent,
    children: [{
        path: "",
        redirectTo: "projects",
        pathMatch: "full"
      },
      {
        path: "projects",
        component: ProjectsComponent
      },
      {
        path: "archived",
        component: ArchivedProjectsComponent
      },
      {
        path: "projects/:id",
        component: SingleProjectComponent,
        children: [{
            path: "",
            redirectTo: "plans",
            pathMatch: "full"
          },
          {
            path: "plans",
            component: PlansComponent
          },
          {
            path: "tasks",
            component: TasksComponent
          },
          {
            path: "photos",
            component: PhotosComponent
          },
          {
            path: "files",
            component: FilesComponent
          },
          {
            path: "people",
            component: PeopleComponent
          },
          {
            path: "settings",
            component: SettingsComponent
          },
          {
            path: "trash",
            component: TrashComponent
          },
          {
            path: "**",
            redirectTo: "plans",
            pathMatch: "full"
          }
        ]
      },
      {
        path: "**",
        redirectTo: "projects",
        pathMatch: "full"
      }
    ]
  },
  {
    path: "**",
    component: PageNotFoundComponent
  },
];

Answer 1

您可以使用登录组件来实现此目的。成功登录后将用户重定向到子路由。

根据您的结构，从有效负载或您的 API 调用中获取用户的 id，并将其传递给路由。

this.router.navigate(['/dashboard/' + id + '/projects']);

this.router 是Router 的一个实例。

Answer 2

我认为您需要将“:id”的值存储在请求之间的本地存储中，即存储最后一个“id”。

在您的重定向中提供一个任意值，然后在您的DashboardComponent 中捕获它。查找 9999（或其他），然后替换本地存储中的值。

  ngOnInit() {
localStorage.getItem('id'))
  }

{
    path: "dashboard",
    redirectTo: "dashboard/99999", //How to redirect to dashboard/:id ?
    pathMatch: "full"
  }