默认情况下如何导航到子路由 - 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"
  }

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

How to navigate to a child route by default - Angular 7 (Routes)

angular

angular6

angular7

angular7-router