使用CSS锚点时的角度路由器问题

Question

我想在HTML页面中使用CSS锚点。 下面是我的代码：

<a href="#test"></a>

<div id="test" name="test">123</div>

但是我会遇到这个问题。

实际上，我不希望有角度的路由器工作。

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