Créer de navigation lors de la navigation composants imbriqués (Angulaire 2)
J'ai du mal avec ça 🙂
L'idée est d'avoir un composant et lors de naviguer au gré de sous-vues de mettre à jour le fil d'ariane par exemple:
<breadcrumb> Products /Category-C /My-Product </breadcrumb>
Products -> Category-A
-> Category-B
-> Category-C
|-> My-Product
OriginalL'auteur Matt | 2016-05-26
Vous devez vous connecter pour publier un commentaire.
Peut-être que c'est pas la meilleure solution, mais vous pouvez utiliser RoutesRecognized routeur événement et de parcourir à travers l'événement.état._root enfants:
Et l'itinéraire de la config ressemble à ceci:
Testé Angulaire 2 RC4, @angulaire/routeur 3.0.0-beta.1
root
de la UrlTree deRouter.routerState.root
, plutôt que de variable privée_root
. Cela vous permet également d'utiliser NavigationEnd plutôt que RoutesRecognized. Voir cette réponse pour plus d'info et un RC.4 plunker.J'ai aussi rencontré un problème avec cela, fait un peu de creuser et est venu avec une très similaires de mise en œuvre dans RC5 et le nouveau composant routeur. github.com/mikelunn/angular2-breadcrumb
OriginalL'auteur Artem Pogorelov
Ajout sur NullԀʇɹ réponse, vous pouvez créer un fil d'ariane dynamiquement en utilisant PrimeNG du fil d'ariane.
Vous aurez tout d'abord besoin d'un BreadcrumbService:
Puis dans votre composante principale, dire AppComponent, d'injecter votre BreadCrumbService, et lui dit à chaque fois que le fil d'ariane des modifications, mise à jour:
Et votre correspondant le code html de votre AppComponent devrait ressembler à:
Maintenant dans le composant que vous souhaitez créer dynamiquement un fil d'ariane pour, dire que Mon Produit:
OriginalL'auteur Shenbo
À l'aide de bootflat Thème que j'ai créé mon propre fil d'Ariane
pour angular2 projet. Ce fil d'Ariane également en charge le Routage dans angular2. vous avez juste à utiliser ces composants prédéfinis
ici dans le repo.
https://github.com/MrPardeep/Angular2-DatePicker
voici le code à l'aide de Breadcrum dans le fichier HTML:
espère que cela peut vous aider, vous et sera utile pour les autres aussi.
ici est une Démo pour le fil d'Ariane.
Hmm vous avez raison, mais dans ce repo-vous trouvé le fil d'ariane de la composante trop juste cloner le repo et l'exécuter !!
OriginalL'auteur Pardeep Jain
PrimeNG a un Angular2 fil d'ariane de la composante. La démonstration est: http://www.primefaces.org/primeng/#/breadcrumb
Le produit est encore en version bêta et je n'ai pas essayé d'utiliser ce composant, mais il peut la suite de vos besoins.
OriginalL'auteur Heather92065