Question

我想从一个页面导航到另一个页面并直接跳转到目标页面中间的一个控件。通常，我们可以使用标签“＃”跟随控件的名称或ID。

然而，这种方法在Angular 2中确实有效。我尝试了类似的方法 Angular2 Routing with Hashtag to page anchor。使用该方法，url以“#myId”结尾，但页面实际上并没有跳转。

我们还有其他方法来实现这个目标吗？

Answer 1

Angular文档项目具有AutoScrollService服务。你可以尝试使用它。 auto-scroll.service.ts

/**
 * A service that supports automatically scrolling elements into view
 */
@Injectable()
export class AutoScrollService {
  constructor(
      @Inject(DOCUMENT) private document: any,
      private location: PlatformLocation) { }

  /**
   * Scroll to the element with id extracted from the current location hash fragment
   * Scroll to top if no hash
   * Don't scroll if hash not found
   */
  scroll() {
    const hash = this.getCurrentHash();
    const element: HTMLElement = hash
        ? this.document.getElementById(hash)
        : this.document.getElementById('top-of-page') || this.document.body;
    if (element) {
      element.scrollIntoView();
      if (window && window.scrollBy) { window.scrollBy(0, -80); }
    }
  }

  /**
   * We can get the hash fragment from the `PlatformLocation` but
   * it needs the `#` char removing from the front.
   */
  private getCurrentHash() {
    return this.location.hash.replace(/^#/, '');
  }
}

Angular 2：加载页面时跳转到页面的部分元素

1 个答案: