Как я могу перейти на якорь в Angular 7 - PullRequest
Новая
       33

Как я могу перейти на якорь в Angular 7

0 голосов
/ 19 декабря 2018

Я включил anchorScrolling в routingModule и все пути, но когда я нажимаю на ссылки, ничего не происходит.

'nav-bar.component.html' 

<div id="mySidenav" class="sidenav" #sidenav>
   <a href="javascript:void(0)" class="closeBtn" 
   (click)="closeNav()">&times;</a>
   <a routerLink="/hazyMinds" [fragment]="'HazyMinds'">HazyMinds</a>
   <a routerLink="/ourGames" [fragment]="'Games'">Our Games</a>
   <a routerLink="/contact" [fragment]="'Contact'">Contact</a>
</div>
<span id="openNavBtn"  (click)="openNav()" #openBtn>&#9776;</span>



'app.component.html' 

<app-nav-bar></app-nav-bar>
<app-hazy-minds id="HazyMinds"></app-hazy-minds>
<app-games id="Games" ></app-games>
<app-contact id="Contact"></app-contact>
<router-outlet></router-outlet>



'app-routing.module.ts' 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import {ContactComponent} from './contact/contact.component';
import {GamesComponent} from './games/games.component';
import {HazyMindsComponent} from './hazy-minds/hazy-minds.component';

const routes: Routes = [
  {path: '', redirectTo: '/', pathMatch: 'full'},
  {path: 'hazyMinds', component : HazyMindsComponent},
  {path: 'ourGames', component : GamesComponent},
  {path: 'contact', component : ContactComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollOffset: [0, 64]
    }),
    CommonModule
  ],
  exports: [
    RouterModule
  ]
})


export class AppRoutingModule { }

Я ожидаю, что когда я нажму на ссылку, она автоматически перейдет к правильной привязке.
Кто-то знает, что не так с моим кодом?спасибо

1 Ответ

0 голосов
/ 19 декабря 2018

Для этого можно использовать фрагменты: 

this.router.navigate(['/results'], { fragment: 'top' });

// 

<h1 fragment="top">asdasd</h1>

https://angular.io/api/router/NavigationExtras

...