web-dev-qa-db-fra.com

Angular2 Comment naviguer vers une certaine section de la page identifiée avec un attribut id

Comment accéder à certaines sections de la page identifiées par un attribut id?

Exemple:

J'ai besoin de naviguer jusqu'au paragraphe "structure" sur ma page

<div id="info">
  <h3>Info</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>    
<div id="structure">
  <h3>Structure</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Et j'ai une structure de navigation suivante:

<li>
  <ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
    <li><a routerLink="policies" class="collapsible-header">Policies</a>
      <div class="collapsible-body">
         <ul>
           <li><a >Info</a></li>
           <li><a >Structure</a></li>
           <li><a >Something Else</a></li>
         </ul>
      </div>
    </li>
   </ul>
 </li>

Je crois comprendre que dans Angular1.0, j'aurais simplement pu accéder à la section de la page en utilisant quelque chose comme: ui-sref = "policies ({'#': 'structure'})" ou href = "# structure" ou ui -sref = "politiques" href = "# structure" ...

Comment puis-je le faire dans Angular2? J'ai regardé l'exemple Fragment dans la section docs : Paramètres de requête et fragments et je trouve que cet exemple est très déroutant et un peu exagéré pour une tâche si simple

angularroutingnavigationfragment
11
Alla

Angular 2: Je préférerais utiliser la méthode scrollIntoView () scrollIntoView . Il fournirait un effet de transition de défilement en douceur dans le navigateur.

Code HTML 

<div #info id="info">
        <h3>Info</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div #structure  id="structure">
        <h3>Structure</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  <li>
  <ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
    <li><a routerLink="policies" class="collapsible-header">Policies</a>
      <div class="collapsible-body">
         <ul>
           <li (click)="infoStruc()"><a >Info</a></li>
           <li (click)="moveToStructure()"><a  >Structure</a></li>
           <li><a >Something Else</a></li>
         </ul>
      </div>
    </li>
   </ul>
 </li>

et dans le composant.

  @Component({
    selector: 'my-app',
    template: `template.html        `
})
export class AppComponent {
    @ViewChild('structure') public structure:ElementRef;
    @ViewChild('info') public info:ElementRef;

    public moveToStructure():void {
            this.structure.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
    }
    public infoStruc():void {
        setImmediate(() => {
            this.info.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
        });
    }
}
17
Praveen M P

J'ai utilisé une combinaison de la réponse précédente une fois qu'un clic est effectué dans le fichier HTML:

<ul>
   <li><a (click)="internalRoute("routeexample1","info")">Info</a></li>
   <li><a (click)="internalRoute("routeexample2","structure")>Structure</a></li>
   <li><a (click)="internalRoute("routeexample3","something")>Something Else</a </li>
</ul>

Dans le fichier TypeScript du composant (fichier composant), il est nécessaire de définir la navigation correspondante, y compris le routeur et la navigation:

constructor(private router:Router) { }
internalRoute(page,dst){
    this.sectionScroll=dst;
    this.router.navigate([page], {fragment: dst});
}

Avec cela, l'application est capable de naviguer vers la page correspondante mais pas vers la section spécifique. Pour aller à la section définie (souhaitable), il faut faire le défilement. Pour cela, nous définissons initialement une fonction pour faire défiler jusqu'à "id" spécifique ( Fonction de défilement ici ):

doScroll() {

    if (!this.sectionScroll) {
      return;
    }
    try {
      var elements = document.getElementById(this.sectionScroll);

      elements.scrollIntoView();
    }
    finally{
      this.sectionScroll = null;
    }
  }

Enfin, nous devons capturer l'événement de navigation et effectuer le défilement (en modifiant la fonction ngInit) ( page de capture d'événement Init ):

ngOnInit() {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      this.doScroll();
      this.sectionScroll= null;
    });
  }

Ça marche pour moi. L'espoir aide.

12
Aitor Corchero

Vous pouvez ajouter l'attribut fragment pour votre lien html

<ul>
   <li><a [routerLink]="['routeexample1']" fragment="info">Info</a></li>
   <li><a [routerLink]="['routeexample2']" fragment="structure">Structure</a></li>
   <li><a [routerLink]="['routeexample3']" fragment="something">Something Else</a></li>
 </ul>

Pour naviguer par programme, vous pouvez

this.router.navigate( ['routeexample1' ], {fragment: 'structure'});
2
Michael