Angular：如果未提供 child 参数 ID，则重定向到 parent

Question

我有两个模块，每个模块都有自己的路由：

CarsModule

PassengersModule (Lazy Loaded)

Passenger 是一辆 child 的汽车，通过 url:

进入

https://localhost/cars/12/passengers/1

CarsModule 和 PassengersModule 各自定义了路线：

const routesCars: Routes = [
    {
        path: "cars/:id",
        canActivate: [AuthGuard],
        component: CarsContainerComponent,
        children: [
            {
                path: "",
                redirectTo: "dashboard",
                pathMatch: "full",
            },
            {
                path: "dashboard",
                component: CarsDashboardPageComponent,
            },
            {
                path: "passengers",
                loadChildren: () =>
                    import("./passengers/passengers.module").then(
                        (m) => m.PassengersModule
                    ),
            },
        ],
    },
];

const routesPassenger: Routes = [
    {
        path: "",
        redirectTo: ?????
    },
    {
        path: ":pid",
        component: PassengerDashboardContainerComponent,
        children: [
            {
                path: "",
                component: PassengerDashboardContainerComponent,
            },
        ],
    },
];

如果有人导航到没有 pid 的乘客：

http://localhost/cars/12/passengers

我想将 url 重定向到 Parent 汽车 url:

http://localhost/cars/12

我尝试在加载到路径“”的空组件中执行此操作，但它看起来很笨重。实现此目标的最佳方法是什么？

Answer 1

你可以使用守卫来决定一个路由是否可以被激活

PassengerRoute.service.ts

import { Injectable } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Injectable()
export class PassengerRouteGuard implements CanActivate {
  constructor(private route: ActivatedRoute, public router: Router) { }
  canActivate(): boolean {
    this.route.params.subscribe(params => {
      if (!params['pid']) {
        this.router.navigate(['/cars/']);
        return false;
      }
      return true;
    });
  }
}

PassengersModule.route.ts

import { PassengerRouteGuard} from './PassengerRoute.service';
const routesPassenger: Routes = [
{
    path: ":pid",
    canActivate: [PassengerRouteGuard],
    component: PassengerDashboardContainerComponent,
    children: [
        {
            path: "",
            component: PassengerDashboardContainerComponent,
        },
    ],
},
];

Reference

Angular：如果未提供 child 参数 ID，则重定向到 parent

Angular: Redirect to parent if child parameter id is not supplied

routes

lazy-loading

typescript

angular