2017-08-29 3 views
4

J'ai une application angulaire 4 régulière et j'utilise Router, ActivatedRoute.params.subscribe, [routerLink] etc. pour naviguer entre les pages et interpréter les URL.Comment encapsuler la structure/les chemins de page dans Angular 4?

Maintenant, cela conduit au fait que j'ai beaucoup de "chaînes magiques" qui volent autour parce que de nombreux .ts-Files différents ont des fragments d'url en eux. Bien sûr, ça marche, parce qu'ils correspondent, mais ça me semble un peu embarrassant. Voici un exemple au hasard:

<a [routerLink]="['/foo']">Home</a> <a [routerLink]="['/foo/item', 1]">Item 1</a> <a [routerLink]="['/foo/item', 2]">Item 2</a>

Une idée que j'avais est de construire un service qui fait le bâtiment-url pour les composants et connaît donc sur la structure url. C'est juste une idée que j'ai eu mais je ne suis pas expérimenté avec angulaire et peut-être que les «cordes magiques» sont la voie à suivre pour une raison quelconque.

Existe-t-il une meilleure pratique pour garder la structure url hors de vos composants?

+0

Je les configurer dans le composant –

+0

@MaximKoretskyi, qui au moins obtenir les urls sur le modèle html. Merci pour l'idée! – clemens

+0

De rien, alors vous pouvez implémenter le service qui contient la carte des routes complètes et peut déterminer les routes possibles en fonction de la route actuelle du composant, en quelque sorte il prend la route actuelle 'service.get (currentRoute)' et renvoie le liste des routes possibles et vous pouvez ensuite les utiliser dans le modèle –

Répondre

2

C'est la raison pour laquelle j'ai utilisé la dépendance du routeur de mes composants et naviguez manuellement vers chacune de mes destinations à chaque fois. Bien sûr, si les routes changent, je vais devoir changer quelques cordes, mais ça me va. Pour cela, j'ai également créé un composant de navigation qui m'indiquait les routes de mon application. J'ai même essayé de construire dynamiquement mes routes d'application avec beaucoup de méta-données et de gestion des droits, mais j'ai finalement détruit ma possibilité de chargement paresseux, donc je ne conseillerais pas de le faire.

Pour moi, la meilleure chose à faire est de créer un composant de navigation qui utilisera une seule configuration de routeur (cela dépend de vos besoins). Voici ce que je parle: https://github.com/akveo/ng2-admin/blob/master/src/app/pages/pages.menu.ts

et l'application de démonstration: https://github.com/akveo/ng2-admin

+0

ouais, c'est aussi une idée intéressante –