web-dev-qa-db-fra.com

Angular routeur: comment remplacer param?

Supposons que j'ai 3 URL: /:projectId/info, /:projectId/users, /:projectId/users/:userId/profile. Tous ont param projectId. L'interface utilisateur comporte un composant permettant de passer d'un projet à un autre. Donc j'ai besoin de: 

  1. Obtenir l'URL actuelle
  2. Changer le paramètre par son nom (par exemple, projectId)
  3. Accédez à la nouvelle URL

J'ai donc besoin de quelque chose comme this.router.replaceParam(currentUrl, {projectId: 'project_id_2'}) qui transformera /project_id_1/users/user_id_1/profile en /project_id_2/users/user_id_1/profile (et toute autre URL avec :projectId param)

Je pensais que c'était un problème simple et courant mais je n'ai pas trouvé de solution en 1 heure. Suggéré ici la solution ne fonctionne pas comme indiqué dans le dernier commentaire

angularangular2-routingangular-routing
5
fedor.belov

Pour naviguer vers un lien particulier à partir de l'URL actuelle, vous pouvez faire quelque chose comme ceci,

 constructor(private route: ActivatedRoute, private router: Router){}
 ngOnInit() {
     this.route.params.subscribe(params => {
         // PARAMS CHANGED ..    

         let id = params['projectid'];    
     });
 }
 navigate(){
     this.router.navigateByUrl(this.router.url.replace(id, newProjectId));
     // replace parameter of navigateByUrl function to your required url
 }

Sur la fonction ngOnInit, nous avons souscrit à params afin de pouvoir observer et exécuter nos instructions à chaque changement de paramètre url.

1
khush

C'est une façon de le faire. Récupère l'URL, récupère les paramètres actuels (parce que ça a l'air de ne pas savoir ce qu'ils sont), si vous avez à la fois projectid et userid, vous vous dirigez ensuite vers celui avec les deux. Si l'URL se termine par 'o', alors vous êtes sur la route /info et si elle se termine par 's', il s'agit de la route /users. 

constructor(private activatedRoute: ActivatedRoute) {}

replacePrarm(projectId) {
  // get current url
  const url = this.router.url;

  // get current params
  this.activatedRoute.params.subscribe((params: Params) => {
       if(params['projectId'] && params['userId']) {
          router.navigate(projectId, 'users', params['userId'], 'profile'], {relativeTo: route});
       } else if (url[url.length - 1] === 'o') {
          router.navigate(projectId, 'info'], {relativeTo: route});
       } else if (url[url.length - 1] === 's') {
          router.navigate(projectId, 'users'], {relativeTo: route});
       }
  });
}

En supposant que vous n’ayez aucune idée de la route sur laquelle vous êtes, mais en réalité, vous devriez avoir une idée de si vous êtes dans les utilisateurs, les informations ou le profil. Sinon, vous utilisez un composant pour trois pages très différentes.

0
rhavelka

En regardant votre question, vous voulez changer les 2 paramètres.

Comme indiqué dans : 

https://angular.io/api/router/Router#navigatebyurl

Vous pouvez implémenter router.navigate([yourprojectId, 'users', youruserId , 'profile'], {relativeTo: route});

0
CruelEngine

Dans le composant correspondant (dans le fichier .ts, par exemple), vous devez ajouter 

import { Subscription } from 'rxjs/Subscription';

Déconnectez-vous de votre utilisation de @component après

myVariable: {projectId: string, userId: string};
paramsSubscription: Subscription;


ngOnInit(){
this.myVariable = {
   projectId: this.route.snapshot.params['projectId'],
 // userId: this.route.snapshot.params['userId']
};
this.paramsSubscription = this.route.params
  .subscribe(
    (params: Params) => {
      this.myVariable.projectId = params['projectId'];
    //  this.myVariable.userId = params['userId'];
    }
  );
}

et sur quelle méthode vous êtes intéressé pour changer de route existante

changeRoute(): void{
   this.router.navigate(['/curentUrl',this.project_id_2, 'users/user_id_1/profile']);
}

espérons que cela peut vous aider

0
Prasanna Sasne

Est-ce que cela aiderait?

export class MyComponent {

  constructor(private router: Router, private route: ActivatedRoute){}

  public navigate(){
    const projectId = getNewProjectId(route.snapshot.params['projectId']);
    this.router.navigate([
      projectId, 
      this.router.url.substring(this.router.url.indexOf('/') + 1, this.router.url.length)
    ]);
  }
}

Au cas où vous auriez besoin d'un contrôle plus granulaire (en principe, vous ne savez pas à quoi devrait ressembler l'URL actuelle), essayez de parcourir l'arbre de routage, en traitant les chemins de configuration de route. Vous pouvez y trouver la configuration :projectId et, en fonction de votre position dans l’arborescence, vous pouvez comprendre votre structure router.url.

let route = activatedRoute.snapshot;
while (route) {
  if (route.routeConfig && route.routeConfig.path) {
    // Do something with the path
  }
  route = route.parent;
}

Espérons que cela aide un peu :-)

0
Heehaaw