子组件的 routerLink 重定向到 Page Not Found 有效

Question

我正在尝试使用 routerLink 将 UserId 传递给组件之一。并重定向到以下网址。但显示页面未找到的路线有效消息。 http://localhost:4200/admin/distributors/edit/3

还包括路由模块中的组件。 路径：'distributors/edit:UserId'，组件：AddDistributorComponent，

上面我正在获取 UserId，但为什么它显示页面未找到消息。

请帮助..提前致谢。

distributors.component.html

<button class="btn btn-info" title="Edit" [routerLink]="['/admin/distributors/edit', usr.UserId]"></button>

admin.routing.module.ts

import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AdminComponent } from './admin/admin.component';
    import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
    import { DistributorsComponent } from './distributors/distributors.component';
    import { AddDistributorComponent } from './add-distributor/add-distributor.component';
    import { AuthGuard } from '../auth/auth.guard';
    const routes: Routes = [
        {
        path: 'admin',
        component: AdminComponent,
        canActivate: [AuthGuard],
        children: [
          {
          path: '',
          children: [
            { path: 'distributors', component: DistributorsComponent },
            { path: 'distributors/create', component: AddDistributorComponent },
            { path: 'distributors/edit:UserId', component: AddDistributorComponent },
            { path: '', component: AdminDashboardComponent }
          ],
        }
      ]
      }
    ];

    @NgModule({
      imports: [RouterModule.forChild(routes)],
        providers: [],
      exports: [RouterModule]
    })
    export class AdminRoutingModule { }

add-distributor.component.ts

ngOnInit(){
    const id = this.actroute.snapshot.paramMap.get('UserId');
    }

Answer 1

我认为您在 admin.routing.module.ts

中有一个额外的 children

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AdminComponent } from './admin/admin.component';
    import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
    import { DistributorsComponent } from './distributors/distributors.component';
    import { AddDistributorComponent } from './add-distributor/add-distributor.component';
    import { AuthGuard } from '../auth/auth.guard';
    const routes: Routes = [
        {
        path: 'admin',
        component: AdminComponent,
        canActivate: [AuthGuard],
        children: [
            { path: 'distributors', component: DistributorsComponent },
            { path: 'distributors/create', component: AddDistributorComponent },
            { path: 'distributors/edit/:UserId', component: AddDistributorComponent },
            { path: '', component: AdminDashboardComponent }
        ]
      }
    ];

    @NgModule({
      imports: [RouterModule.forChild(routes)],
        providers: [],
      exports: [RouterModule]
    })
    export class AdminRoutingModule { }

为了获得参数，我通常使用订阅：

 this.route.params.subscribe((params) => {
        this.paramId = params.UserId;
 });