angular7项目中使用页面锚点

在angular项目中使用页面锚点，原生的html锚点的时候会页面跳转或者找不到路由。

可以使用以下方式解决：

html

<div class="circle_list">
    <div class="circle wow zoomIn" (click)="goDistance1()">优质原料</div>
    <div class="circle wow zoomIn" (click)="goDistance2()">伴施产品</div>
    <div class="circle wow zoomIn" (click)="goDistance3()">产品特点</div>
</div>

<h2 class="sub_title wow fadeInRight" #distannce1>优质原料</h2>
<h2 class="sub_title wow fadeInRight" #distannce2>伴施产品</h2>
<h2 class="sub_title wow fadeInRight" #distannce3>产品特点</h2>

ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-soil-testing-fertilizer',
  templateUrl: './soil-testing-fertilizer.component.html',
  styleUrls: ['./soil-testing-fertilizer.component.scss']
})
export class SoilTestingFertilizerComponent implements OnInit {

    @ViewChild('distannce1') distannce1: ElementRef;
    @ViewChild('distannce2') distannce2: ElementRef;
    @ViewChild('distannce3') distannce3: ElementRef;

    constructor() { }

    ngOnInit() {
    }

    // 页面锚点
    goDistance1() {
        this.distannce1.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
    }

    goDistance2() {
        this.distannce2.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
    }

    goDistance3() {
        this.distannce3.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
    }

}