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

在路由文件中

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>

Answer 2

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

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

路由本身有一个很好的例子here。他们使用以下路线定义：

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

至于打字稿代码。

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

所以，我认为你在那里正确。

我认为这只是未设定的指数。

Answer 3

前一段时间我遇到了这个问题。这里的问题是您拥有的路由配置。您无法转到/ user / 1，因为您已定义了＆＃39;用户详细信息＆＃39;作为“用户”孩子的路线路线。您必须导航到＆＃39; / user / user-detail / 1＆＃39;或者只是使用路径＆＃39;：id＆＃39;来定义一个新的子路由。指向您的详细信息组件，您现在可以导航到＆＃39; / user / 1＆＃39;。

总结：路线：

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

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

    ]},
];

您可以导航到＆＃39; / user / user-details / 1＆＃39;。路线：

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

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

    ]},
];

您可以导航到＆＃39; / user / 1＆＃39;。希望它能帮到你。

Answer 4

它应该是这样的

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

如果您希望列出/user/1的网址，请更改路由器配置以匹配名称i：e而不是user-detail更改为user

<强>更新

Ya将模板行更改为此

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

在Angular 4中使用ID进行路由

4 个答案: