css - 使用 css anchor 时的 Angular 路由器问题

Question

<分区>

Answer 1

文档引用:Angular Routing Navigation

解决这个问题的办法是

选项 1:使用片段

在您的 HTML 文件中

<a [routerLink]="['/']" fragment="test"></a>

在你的 Typescript 文件中

 ngOnInit() {
     this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
    }

    ngAfterViewChecked(): void {
      try {
          if(this.fragment) {
              document.querySelector('#' + this.fragment).scrollIntoView();
          }
      } catch (e) { }
    }

选项 2:只需创建方法并滚动

在您的 HTML 文件中

<button (click)="scroll(test)"></button>
<div #test >Your target</div>

在你的 .ts 文件中

scroll(el) {
    el.scrollIntoView({ behavior: "smooth"});
}

Angular 6.1 及更高版本也有一个名为 anchorScrolling 的选项，但据我所知，它仍处于测试阶段

引用 how to use anchorScrolling