Как я могу прокрутить до якоря на моей угловой странице - PullRequest
Новая
       8

Как я могу прокрутить до якоря на моей угловой странице

0 голосов
/ 14 января 2019

Я хочу создать привязку на моей угловой странице, но она не работает, и я не знаю почему.

Мой HTML-компонент: 

<h1 id="choose_package">Step 1 : choose a package</h1>
<div>Some elements</div>
<a [href]="choose_package">test</a>

Но он возвращает мне ноль и переходит на страницу 404.

Изменить (теперь я могу прокручивать, но это не сделано постепенно): 

this.router.events.pipe(filter(e => e instanceof Scroll)).subscribe((e: any) => {
    if (e.position) {
      this.viewportScroller.scrollToPosition(e.position);
    } else if (e.anchor) {
      this.viewportScroller.scrollToAnchor(e.anchor);
    } else {
      this.viewportScroller.scrollToPosition([0, 0]);
    }
  ;
});

Ответы [ 2 ]

0 голосов
/ 14 января 2019

используйте Fragment для этого. 

<h1 id="choose_package">
Step 1 : choose a package for your license
</h1>
<div>Some elements</div>
<a [fragment]="choose_package">test</a>

Он будет перенаправлен на «choose_package» на той же странице.

Вам также необходимо определить в вашем корневом модуле anchorScrolling

...
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
    })
  ]
})
...
0 голосов
/ 14 января 2019

Прокрутка привязки по умолчанию отключена в версии 6.1.0. Включить прокрутку привязки внутри конфигурации маршрута 

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Затем используйте фрагмент 

<h1 id="choose_package">Step 1 : choose a package for your license</h1>
<div>Some elements</div>
<a [fragment]="choose_package">test</a>
...