Question

我要做的是创建一个锚链接。此链接将导航到我页面中的特定滚动点。我有Angular第5版。

HTML：

<mat-list>
     <mat-list-item><a [routerLink]="['/']"> Intro </a></mat-list-item>
     <mat-list-item><a [routerLink]="['/']" fragment="mobile"> Mobile </a></mat-list-item>     
     ...
</mat-list>

在home.componets.ts中：

export class HomeGrComponent implements OnInit {
    private fragment: string;

constructor(private route: ActivatedRoute) { }

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

ngAfterViewInit(): void {
    try {
        setTimeout(()=> {
            document.querySelector('#' + this.fragment).scrollIntoView();
        }, 1000);

    } catch (e) { }
  }    
}

我从this question获取此代码，但它不起作用。网址已更改为

http://localhost:4200/#mobile

但它没有滚动到我的观点。同样在控制台中有一个错误：

Cannot read property 'scrollIntoView' of null

什么可能出错？如果您需要一些其他信息，请让我回复。滚动导航也很顺利（可选）。

Answer 1

您可以使用以下代码：

import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { filter } from 'rxjs/operators';
import { Subscription } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnDestroy {
  private sub: Subscription;

  constructor(activeRoute: ActivatedRoute) {
    this.sub = activeRoute.fragment.pipe(filter(f => !!f)).subscribe(f => document.getElementById(f).scrollIntoView());
  }

  public ngOnDestroy(): void {
    if(this.sub) this.sub.unsubscribe();
  }
}

工作example和Code behind

Answer 2

它无效的原因是ngAfterViewInit在Observable被解析之前被调用，因此this.fragment为空，因此找不到元素

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

ngAfterViewInit(): void {
    let interval = setInterval(()=> {
        let elem = document.getElementById(this.fragment);
        if(elem) {
            elem.scrollIntoView();
            clearInterval(interval);
        }
    }, 1000);  
}

Answer 3

另一种选择是使用 setTimout（）。因此，您不需要clearInterval（）。您还可以在 ActivatedRoute

的帮助下访问该片段

constructor(private route: ActivatedRoute) {}

ngAfterViewInit(): void {
           setTimeout(() => document.querySelector(this.route.snapshot.fragment).scrollIntoView(), 1000);
}

Angular 5锚没有滚动

3 个答案: