Angular中锚点的写法

电玩女神 2023-06-22 03:18 7阅读 0赞

普通页面中的写法

此方法在angular中是失效的，因为此写法跟路由冲突

解决方案一：（不推荐）

//html:
    <a (click)="goDetail('id')">跳转</a>
    <div id="id">指定位置</div>

//ts:
    goDetail(id:string){
        window.location.hash = '';
        window.location.hash = name;
    }

此方法在每次跳转的时候会导致hash刷新

解决方案二：

//html:
    <a (click)="goDetail('id')">跳转</a>
    <div id="id">指定位置</div>

//ts:  
     
    
    import {  Router} from '@angular/router';
    
    //...
     
    constructor( private router: Router) { }
    
    goDetail(id: string) {
            const element = document.querySelector('#' + id);
            if (element) { element.scrollIntoView(true); }
            // 路由跳转
            let _path = window.location.pathname;
            this.router.navigate([`${_path}`], { fragment: `${id}` });
        }

scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数`true`，元素的顶端将和其所在滚动区的可视区域的顶端对齐，详见[Element.scrollIntoView()][Element.scrollIntoView]

解决方案三：（此方法不会导致路由的变化）

//html:
    <button (click)="goDistance1()">跳转到2</button>
    <button (click)="goDistance2()">跳转到2</button>
    <div #distannce1  style="width:500px;height:500px;background:green">123</div>
    <div #distannce2  style="width:500px;height:500px;background:yellow">456</div>

//ts:
    
    import { ViewChild, ElementRef } from '@angular/core';
     
    //...
     
    @ViewChild('distannce1') distannce1: ElementRef;
    @ViewChild('distannce2') distannce2: ElementRef;
    
    goDistance1(): void {
        this.distannce1.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
    }
     
    goDistance2(): void {
        this.distannce2.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
    }

[Element.scrollIntoView]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView