J'essaie d'obtenir l'itinéraire actuel et de naviguer vers le même itinéraire après avoir modifié le itemCode dans la zone de texte de recherche dans l'en-tête. Lorsque je suis arrivé à la page pour la première fois, la route parente est "iauth / iauthedit / 1706", puis l'utilisateur accède à la route enfant "/ info", il existe plusieurs autres routes que l'utilisateur peut naviguer à partir de la barre de navigation latérale qui n'apparaît pas dans l'image ci-dessous . Lorsque je change le code d'élément en 1853 dans l'en-tête de l'application comme indiqué dans l'image, l'URL doit changer en "iauth / iauthedit / 1853 / info", comment puis-je modifier le paramètre de route URL du navigateur de manière dynamique en fonction de l'URL de la route actuelle sur le navigateur?, j'essaie de trouver la route actuellement activée qui, dans le scénario actuel, parent "iauth / iauthedit /" à partir de l'URL du navigateur, afin que je puisse faire la navigation
this.router.navigate ([' iauth / iauthedit / ', 1853];
Voici les itinéraires actuels:
const itemAuthRoutes: Routes = [
{
path: 'iauthedit/:itemCode',
children: [
{
path: '',
canActivate: [AuthGuard],
//data: { feature: AppFeature.AuthorizedItem },
component: ItemAuthorizationEditComponent,
children: [
{
path: 'info', component: ItemAuthorizationInfoEditComponent
}]
}]
}]
3 Réponses :
Le problème avec le ActivatedRoute fourni par Angular est que sa valeur dépend du composant dans lequel il est injecté. En effet, lorsque vous injectez ActivatedRoute dans un composant, la valeur ne sera pas la route complète, mais la partie de la route qui affichait le composant.
Cela signifie que si vous souhaitez récupérer l'URL complète dans le composant qui contient l'entrée "code article", vous ne pouvez tout simplement pas le faire en utilisant l'API Angular. Je vous suggère donc d'analyser l'URL en utilisant l'API Javascript native, puis de déclencher une navigation avec this.router.navigate .
Angular est plutôt intelligent à ce stade, il ne rechargera pas les composants et vous pourrez réagir au changement de paramètres en utilisant this.activatedRoute.params.subscribe (...) , puis chargez les nouvelles données et transmettez-les aux enfants via les propriétés @Input () .
Je n'aurai pas besoin de paramètres de route, je n'aurai besoin que de la route actuelle sans paramètres afin de pouvoir re-naviguer avec des paramètres différents. Par exemple: iauth est la route du module et iauthedit est la route du composant avec: itemCode comme paramètre, info est la route enfant dans le composant iauthedit. Maintenant, si je devais changer le paramètre et recharger la page. J'ai besoin de iauth / iauthedit en excluant le paramètre de code article et la route enfant / info de l'URL du navigateur, afin que je puisse naviguer comme this.router.navigate (['iauth / iauthedit /', 1888]);
Ok, je pensais que vous vouliez conserver le segment / info . Ensuite, vous pourrez y parvenir si le composant qui contient l'entrée «code article» est ItemAuthorizationEditComponent
ok merci, comment obtenir la route actuelle à partir de l'URL du navigateur, this.route.navigate se fait quelque part dans l'en-tête au niveau de l'application, vous devez donc obtenir la route actuellement activée à partir de l'URL du navigateur dans ce cas iauth / iauthedit,
Ensuite, comme je l'ai expliqué, vous ne pouvez pas le faire avec Angular. Le seul moyen est document.location.pathname ou similaire
Vous pouvez essayer de parcourir la propriété cheminConfig de routeConfig
constructor(private activatedRoute: ActivatedRoute, private router: Router) {}
navigate(newId: string) {
let route = this.activatedRoute.snapshot;
const parts = [];
while (route) {
route.routeConfig && route.routeConfig.path && parts.push(route.routeConfig.path);
route = route.parent;
}
// `parts` now contain your route's pieces - do whatever you deem fit with that
parts[1] = newId; // i.e. replace the part that needs replacing
this.router.navigate(parts.reverse());
}
J'espère que cela aide un peu :-)
Dans mon cas, j'avais besoin du chemin de routage, c'est-à-dire / iauth / iauthedit /: itemCode. Donc, pour obtenir cela, j'ai utilisé ActivatedRoute et Router que j'ai injecté dans mon composant.
L'objet ActivatedRoute a un tableau 'pathFromRoot' dont le dernier élément du tableau contient le chemin de configuration du routeur dans 'routerConfig' avec la valeur du paramètre (ieiauthedit /: itemCode) qui est ensuite fusionné pour former le chemin complet de la configuration du routeur.
Comme vous avez besoin d'un chemin complet sans paramètres de route, vous pouvez utiliser une opération de chaîne pour récupérer le chemin avant les paramètres de route comme ci-dessous
constructor(private router: Router, private route: ActivatedRoute) {
let url = this.router.url;
const index = this.router.url.lastIndexOf(this.route.pathFromRoot[this.route.pathFromRoot.length - 1].routeConfig.path.split('/')[0]);
url = this.router.url.substring(0, index) + this.route.pathFromRoot[this.route.pathFromRoot.length - 1].routeConfig.path;
console.log(this.router.url) // /iauth/iauthedit/1853
console.log(url) // /iauth/iauthedit/:itemCode
let yourRequiredUrl = url.split(':')[0] // /iauth/iauthedit/
}
J'espère que cela vous aidera.
Voulez-vous supprimer les / info de l'itinéraire?