web-dev-qa-db-fra.com

Routing With ID in Angular 4

J'ai besoin d'aide pour l'acheminement dans Angular 4. Je souhaite afficher l'URL comme ceci. Localhost: 4200/user/1 si j'ai cliqué sur les détails de vue du premier utilisateur. Je suis un peu confus sur la façon de procéder. J'ai essayé de mon mieux dans mon code ci-dessous, mais cela ne fonctionne toujours pas.

app-routage.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
3
Joseph

Dans votre fichier de routage

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

A votre avis, faites comme ça

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

Dans votre template

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

Je pense que votre méthode ViewDetail() a besoin d’un paramètre d’indice .

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

Voici un excellent exemple ici pour le routage lui-même . Ils utilisent la définition de route suivante:

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

En ce qui concerne le code TypeScript.

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

Donc, je pense que vous êtes sur la bonne voie là-bas.

Je pense que c'est juste que l'index n'est pas défini.

4
bvdb

J'ai eu ce problème même il y a un moment. Le problème ici est la configuration des routes que vous avez. Vous ne pouvez pas accéder à/user/1 car vous avez défini la route "détails de l'utilisateur" en tant qu'enfant de la route "utilisateur". Vous devez soit accéder à '/ user/user-detail/1' ou simplement définir un nouvel itinéraire enfant avec path ': id' pointant vers votre composant de détails et vous pourrez maintenant accéder à '/ user/1'. .

En résumé: Avec les itinéraires:

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

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

    ]},
];

vous pouvez naviguer vers '/user/user-details/1'.Avec les itinéraires:

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

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

    ]},
];

vous pouvez naviguer vers '/user/1'.Hope cela vous aidera. 

2
Jandro Rojas

Ça devrait être quelque chose comme ça 

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

Si vous voulez que l'URL soit listée /user/1, modifiez la configuration du routeur pour qu'elle corresponde au nom i: e au lieu de user-detail, remplacez user

METTRE &AGRAVE; JOUR

Ya il y a changer la ligne de modèle à cette 

<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