Angular：如果未提供子参数 id，则重定向到父级

Question

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

CarsModule

PassengersModule (Lazy Loaded)

Passenger 是 car 的子对象，通过 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 Car url：

http://localhost/cars/12

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

Answer 1

您可以使用guard来决定是否可以激活路由。

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