web-dev-qa-db-ja.com

ID Angular 4のルーティング

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 {

}
angularangular2-routingangular-router
4
Joseph

ルーティングファイル

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>
4
Robert

ViewDetail()メソッドにはインデックスパラメータが必要だと思います。例えば.

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

ルーティング自体の良い例 here があります。次のルート定義を使用します。

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

TypeScriptコードについても。

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

だから、あなたは正しい方向に進んでいると思います。

インデックスが設定されていないだけだと思います。

4
bvdb

私は少し前にこの問題を抱えていました。ここでの問題は、ルート構成です。 「user」ルートを「user」ルートの子として定義したため、/ 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」に移動できます。お役に立てば幸いです。

2
Jandro Rojas

それはこのようなものでなければなりません

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

/user/1に記載されているURLが必要な場合は、ルーターの設定を変更して、名前を「user-detail」ではなく「i：e」に一致させます。userに変更します。

[〜＃〜]更新[〜＃〜]

テンプレート行をこれに変更します

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