Question

我正在尝试使用routerLink将UserId传递给组件之一。并重定向到下面的URL。但显示“找不到页面”的路线会起作用。 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;
 });

子组件的routerLink重定向到“找不到页面”有效

1 个答案: