Как перейти к дочернему маршруту по умолчанию - Angular 7 (Routes)

Question

Я использую угловые маршруты, чтобы перемещаться по компонентам. Когда пользователь вошел в систему, они переходят к 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

Вы можете достичь этого с помощью компонента Login. Перенаправьте пользователя на дочерний маршрут после того, как он успешно вошел в систему.

Получить идентификатор пользователя из полезной нагрузки или от вашего API-вызова зависит от вашей структуры и передать его по маршруту.

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

this.router является примером Router,

Answer 2

Я думаю, что вам нужно будет хранить значение ": ID" где-то, как в локальном хранилище между запросами, т.е. сохранить последний "идентификатор".

Укажите произвольное значение в вашем перенаправлении, а затем запишите это в свой DashboardComponent, Ищите 9999 (или что-то еще) и вместо этого замените значение из локального хранилища.

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

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