web-dev-qa-db-fra.com

Utilisation du lien d'ancrage #id dans Angular 6

Je travaille avec le projet Angular 6 dans lequel j'ai désactivé/supprimé la stratégie de hachage-emplacement qui supprime # de l'URL.

à cause de cela, le lien ayant:

<li routerLinkActive="active">
   <a [routerLink]="['/settings']">Contact Settings</a>
   <ul class="child-link-sub">
      <li>
         <a href="#contactTypes">Contact Types</a>
      </li>
   </ul>
</li>

ne fonctionne plus, il ignore simplement l'URL des composants actuels et place #contactTypes après localhost.

J'ai trouvé ce lien qui devrait résoudre le problème en utilisant

<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>

qui place #contactTypes à la fin de l'URL mais ne fait pas défiler vers le haut du navigateur.

Source: https://github.com/angular/angular/issues/6595

angularroutinganchorangular6hash-location-strategy
6
eirenaios

Angular 6.1 est livré avec une option appelée achorScrolling qui habite le module du routeur ExtraOptions . La définition de anchorScrolling dit: 

Configure si le routeur doit faire défiler jusqu'à l'élément lorsque l'URL a un fragment.

'disabled' - ne fait rien (par défaut).

'enabled' - fait défiler jusqu'à l'élément. Cette option sera la valeur par défaut dans le futur.

Le défilement d'ancrage ne se produit pas sur "popstate". Au lieu de cela, nous restaurons la position que nous avons stockée ou faisons défiler vers le haut.

Vous pouvez l'utiliser comme ça:

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};

// then just import your RouterModule with these options

RouterModule.forRoot(MY_APP_ROUTES, routerOptions)
7
Machado

Vous devez utiliser une stratégie de routage de hachage pour activer le défilement de hachage.

vous devez donner le deuxième argument sous forme d'objet tel que RouterModule.forRoot ([], {useHash: true} }. Cela fonctionnera.

1
Bhavesh Suwalka

utiliser ngx page scroll

 <a pageScroll href="#awesomePart">Take me to the awesomeness</a>
 <h2 id="awesomePart">This is where the awesome happens</h2>
1
user7185558