angular - 在 Angular 4 中使用 ID 进行路由

Question

我在 Angular 4 中的路由方面需要帮助。我想像这样显示 URL。 Localhost:4200/user/1 如果我点击查看第一个用户的详细信息。我对如何做到这一点有点困惑。我已在下面的代码中尽力而为，但仍然无法正常工作。

app-routing.module.ts

    const appRoutes: Routes = [
        { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'user', component: UserComponent, children: [
            
            { path: 'create-new-user', component: CreateNewUserComponent },
            { path: 'user-list', component: UserListComponent },
            { path: 'user-detail/:id', component: UserDetailComponent },

    ]},
    ];
    
    
    @NgModule({
        imports: [RouterModule.forRoot(appRoutes)],
        exports: [RouterModule]
    })
    export class AppRoutingModule {
    
    }

Answer 1

我刚才遇到了这个问题。这里的问题是您拥有的路线配置。您不能转到/user/1，因为您将“用户详细信息”路由定义为“用户”路由的子路由。您要么必须导航到“/user/user-detail/1”，要么只需定义一个新的子路由，路径“:id”指向您的详细信息组件，您现在就可以导航到“/user/1” .

总结一下:随着路线:

const appRoutes: Routes = [
    ...
    { path: 'user', component: UserComponent, children: [

        ...
        { path: 'user-detail/:id', component: UserDetailComponent },

    ]},
];

您可以导航到“/user/user-details/1”。随着路线:

const appRoutes: Routes = [
    ...
    { path: 'user', component: UserComponent, children: [

        ...
        { path: ':id', component: UserDetailComponent },

    ]},
];

您可以导航到“/user/1”。希望对你有帮助。