IDが4の角度でルーティングする

Question

私のルーティングで角度4でヘルプが必要です。このようなURLを表示したいと思います。 Localhost：4200/user/1、最初のユーザーの表示詳細をクリックした場合。私は少しこれをする方法について混乱しています。私は下のコードでベストを尽くしましたが、それでも動作しません。

アプリ-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はその後、リストされている、URLをしたい場合は、この

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

のようなものであるべきと一致するようにルータの設定を変更しますuser-detailの代わりにi：eという名前をuser

に変更する

UPDATE

雅、私はあなたのViewDetail()方法は、インデックスパラメータを必要だと思います。この

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

Answer 2

にテンプレートの行を変更しています。例：

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

ルーティングの例としては、hereがあります。 typescriptですコードについては

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

： 彼らは、次のルート定義を使用します。

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

だから、あなたは正しい道にいると思います。

インデックスが設定されていないと思います。ビュー方式で

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 }, 
]} 
]; 

あなたのルーティングファイルで

Answer 3

は、あなたのテンプレート

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