Angular2 Comment naviguer à certaine partie de la page est identifié par un attribut id

Comment naviguer à certaine partie de la page est identifié par un attribut id?

Exemple:

J'ai besoin pour naviguer vers "structure" point 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 un suivant de la structure de navigation:

<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>

C'est ma compréhension que dans Angular1.0 je ne pouvais avons accédez à la page de l'article en utilisant quelque chose comme: ui-sref="politiques({'#':'structure'})" ou " href="#" structure ou de l'interface utilisateur-sref="politiques" href="#" structure...

Comment puis-je le faire dans Angular2? J'ai regardé le Fragment exemple dans le docs: les Paramètres de la Requête et des Fragments de l'article et je trouve qu'ils exemple d'être très déroutant et un peu overkill pour une telle potentiellement tâche simple

OriginalL'auteur Alla | 2016-11-08

Angulaire 2: je préfère aller avec scrollIntoView() la méthode scrollIntoView. Il serait de fournir à défilement lisse, effet de transition 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' });
        });
    }
}

OriginalL'auteur Praveen M P

10

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 composant tapuscrit de fichier (fichier de composant), il est nécessaire de définir le correspondant de navigation, 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 à la page correspondante, mais pas dans la section spécifique. Pour aller à l'défini (souhaitable), il est nécessaire de le faire défiler. Pour cela, nous avons d'abord définir une fonction pour faire défiler à certains "id" (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 avons besoin de capturer la navigation de l'événement et d'effectuer le défilement (modifier la ngInit fonction) (Événement de la capture de la page Init):
```
ngOnInit() {
    this.router.events.subscribe((evt) => {
      if (!(evt instanceof NavigationEnd)) {
        return;
      }
      this.doScroll();
      this.sectionScroll= null;
    });
  }
```
Cela fonctionne pour moi. Les espoirs de l'aide.

La première solution qui a fonctionné pour moi. Merci beaucoup pour essayer et la combinaison de différentes solutions. Si je pouvais upvote plus, je l'aurais

OriginalL'auteur Aitor Corchero
2

Vous pouvez ajouter fragment attribut html lien
```
<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 pourrait-il
```
this.router.navigate( ['routeexample1' ], {fragment: 'structure'});
```
Merci pour votre réponse! J'ai essayé les deux et ça ne fonctionne pas.... Je suis à l'aide Angulaire 2.0.1 si ça peut aider..
AFAIR il y a un sujet ouvert sur la navigation avec des fragments.
comment recevoir la frament à l'intérieur "routeexample1'

OriginalL'auteur Michael

Vous devez vous connecter pour publier un commentaire.