13

我在 Angular 4 中的路由需要帮助。我想显示这样的 URL。本地主机：4200/user/1 如果我单击第一个用户的查看详细信息。我对如何做到这一点有点困惑。我在下面的代码中尽了最大努力，但它仍然不起作用。

应用程序路由.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 {
    
    }
4

4 回答 4

20

不久前我遇到了这个问题。这里的问题是您拥有的路线配置。您无法转到 /user/1，因为您将 'user-details' 路由定义为 'user' 路由的子级。您要么必须导航到“/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”。希望它可以帮助你。

于 2018-05-17T13:55:55.407 回答
6

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

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

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

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

至于打字稿代码。

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

所以，我认为你在正确的轨道上。

我认为这只是没有设置索引。

于 2017-08-27T07:17:06.380 回答
6

在您的路由文件中

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>
于 2017-08-27T13:29:31.707 回答
1

它应该是这样的

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

如果您想要列出的 url，/user/1则更改路由器配置以匹配名称 i:e 而不是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
于 2017-08-27T07:13:45.447 回答