web-dev-qa-db-fra.com

Angular 2 - Liens d'ancrage à l'élément sur la page actuelle

Dans le cas où le titre de la question n'est pas clair, j'ai une page Web avec une section "liens", après quoi quelqu'un pourrait cliquer sur le lien et être amené à un élément sur le même modèle. Cela ne signifie pas nécessairement changer l'URL.

L'essentiel de ce que j'ai essayé:

<a href="#sectionA>Section A</a>
<a href="#sectionB>Section B</a>
<a href="#sectionC>Section C</a>
<br/>
<div id="sectionA">
   <p> Content for A </p>
</div>
<div id="sectionB">
   <p> Content for B </p>
</div>
<div id="sectionC">
   <p> Content for C </p>
</div>

Cette approche n'a pas fonctionné car le fait de cliquer sur le lien me dirigerait vers baseUrl/# sectionA (route inexistante), plutôt que la route du composant dont la page faisait partie (baseUrl/currentPage # sectionA).

La première approche a échoué, j'ai essayé ce qui suit:

<a href="currentPage#sectionA>Section A</a>
<a href="currentPage#sectionB>Section B</a>
<a href="currentPage#sectionC>Section C</a>

Cela fonctionne réellement pour la page en cours, faisant défiler l'utilisateur jusqu'à la section sur la page en cours; le problème rencontré est lorsque nous avons une route enfant utilisant le même composant et le même modèle. Essentiellement, la navigation vers "baseUrl/currentPage" vous amène à un formulaire vide. Si un utilisateur accédait, par exemple, à "baseUrl/currentPage/1", nous nous attendrions à ce que le formulaire soit rempli avec des données pour 1, qui est un ID.

Ce que j'aimerais, c'est qu'un utilisateur clique sur une ancre dans ce menu contextuel latéral pour accéder à une section sur le modèle utilisé par currentPage et les routes paramétrées de currentPage (currentPage/1, currentPage/31, etc.). Ce qui n'est pas important, c'est que la section sur le modèle soit référencée dans l'URL. Je me soucie seulement que l'aspect navigation soit fonctionnel pour le parent et ses enfants. Il est certainement préférable de ne pas avoir à utiliser des plugins tiers angular.

Toutes les suggestions et contributions sont très appréciées.

Edit: Ajout de routes de composants pour le contexte:

export const CurrentComponentRoutes: Route[] = [
  {
    path: 'currentPage',
    component: CurrentComponent
  },
  {
    path: 'currentPage/:ID',
    component: CurrentComponent
  }
];

Les itinéraires ci-dessus sont exportés vers le routage principal de l'app.component:

export const appRoutes: Routes = [
  ...CurrentComponentRoutes,
  ...OtherRoutes
];

export const routing: ModuleWithProviders = RouterModule.forRoot(approot);

Le routage d'exportation est ensuite importé dans le module d'application principal. De plus, j'ai défini la base href dans le fichier index.html.

html5angularroutinganchor
9
Jacob Kochocki

lié à la réponse de pe8ter, il peut également être activé par [routerLink]

veuillez voir si cela aide Angular2 Routing with Hashtag to page anchor

1
Jonathan Niu