在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 {
    
    }

- Joseph

---

你说的“不工作”是什么意思？ - Daniel

我的意思是我无法访问此URL：Localhost:4200/user/1。希望你能帮助我。 - Joseph

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'。

希望它能对你有所帮助。

- Jandro Rojas

Answer 2

在你的路由文件中：

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: ':id', component: UserDetailComponent }
  ]}
]; 

在你的视图方法中，按照以下方式执行

ViewuserDetail(user_id : any){
   let url: string = "/user/" + user_id
        this.router.navigateByUrl(url);
     }

在你的模板中

<td><button class="btn btn-primary"  (click)="ViewuserDetail(user_object.id)">View</button></td> 

- Robert

Answer 3

我认为你的ViewDetail()方法需要一个索引参数。

public ViewDetail(index: number)
{
  this.index = index;
  ...
}

关于路由的示例可以在这里找到。他们使用以下路由定义：

const routes: Routes = [
  ...
  { path: 'detail/:id', component: HeroDetailComponent },
  ...
];

关于 TypeScript 代码。

gotoDetail(): void {
  this.router.navigate(['/detail', this.selectedHero.id]);
}

我认为你走在了正道上。

我认为只是未设置索引。

- bvdb

---

@bvdb，你是如何在 gotoDetail() 方法中定义 router 的？ - Junius

@Juniuz 导入{ Router } from '@angular/router'; 然后在你的构造函数中定义它：constructor(public router: Router){} - Josh Dando

Answer 4

应该是像这样的

  ViewDetail(index : any){
    this.router.navigate(['/user-detail', index]);
  }

如果您希望将URL列为/user/1，则需要更改路由器配置以匹配名称。例如，将user-detail更改为user。 更新： 是的，需要将模板行更改为以下内容。

<td><button class="btn btn-primary" style="cursor: pointer;" (click)="ViewDetail(i)">View</button></td> // it should be i instead of index

- Rahul Singh

---

仍然无法工作。也许我的ViewDetail按钮有问题。 - Joseph

@Joseph 嘿，是的，有的。我已经更新了答案，请检查一下，应该是i而不是index。 - Rahul Singh

所以，基本上你改变了你的答案并复制了我的，而我的答案是早先发布的。 :) ... 哦，好吧，这就是生活吧。 - bvdb

@bvdb，我再次看了一下原帖的问题，我的解决方案是路径参数，而在他给我发邮件后，我提供了正确的解决方案。他有子路由，但在问题中没有提到，所以我的解决方案不能完全解决。另外，请查看更新部分，模板不正确，应该是i而不是index？所以你的解决方案并不完全正确。 - Rahul Singh

评论不适合进行长时间的讨论或调试会话，而交换电子邮件地址也是不鼓励的，因为它会破坏问答的目的。如果您仍然遇到问题，请在问题中更新一个 [mcve]，并 @Joseph。 - Cody Gray