Angular路由器：如何根据路由器的一部分重定向到一个组件link

Question

在我的 Angular 应用程序中

我有这个路由文件：

const routes: Routes = [
  {
    path: "",
    children: [
      {
        path: "",
        redirectTo: "/my-default-page",
        pathMatch: "full"
      },
      {
        path: "reset_password",
        component: ResetPassword,
        canActivate: [MyAuthGuard],
        children: [{ path: "**", redirectTo: "/reset_password" }]
      }
    ]
  }
}
];

我不想通过重定向，当 route: 会是这样的：

/reset_password/blabalabla

它不会重定向我，而只是加载组件ResetPassword并保持 url 原样

建议？

Answer 1

使用路由参数。 然后，您不需要任何子路线。

{
    path: "reset_password/:id",
    component: ResetPassword,
    canActivate: [MyAuthGuard]
  }

您的链接将保持不变，如果您愿意，可以使用 ResetPassword 组件中的以下代码从链接中检索此参数

constructor(private route: ActivatedRoute){}

ngOnInit():void{
const id = this.route.snapshot.paramMap.get('id');
}