Angular2 Hashtag路由到Anchor不会移动页面

Question

所以我使用以下帖子来弄清楚如何将片段添加到网址。

Angular2使用Hashtag路由到页面锚点

并且片段被添加得很好，但是页面不会移动到结果锚点。 我已尝试在目标div上同时使用name和id属性，但似乎都不起作用。

我使用的是Angular Version 2.0.0-rc.3和路由器版本3.0.0-alpha.6。

谢谢！

<a [routerLink]="[]" fragment="destination">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

2个元素之间有足够的空间来判断页面是否实际移动。

如前所述，url正确地将#destination添加到自身。

Answer 1

解决方法可能是在组件中编写一个函数，将location.hash设置为要导航到的div的id。

<a (click)="goTo('destination')">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

然后在你的组件中：

goTo(location: string): void {
    window.location.hash = location;
}

Answer 2

这对我有用：

首先，准备MyAppComponent以在ngAfterViewChecked（）中自动滚动...

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component( {
   [...]
} )
export class MyAppComponent implements OnInit, AfterViewChecked {

  private scrollExecuted: boolean = false;

  constructor( private activatedRoute: ActivatedRoute ) {}

  ngAfterViewChecked() {

    if ( !this.scrollExecuted ) {
      let routeFragmentSubscription: Subscription;

      // Automatic scroll
      routeFragmentSubscription =
        this.activatedRoute.fragment
          .subscribe( fragment => {
            if ( fragment ) {
              let element = document.getElementById( fragment );
              if ( element ) {
                element.scrollIntoView();

                this.scrollExecuted = true;

                // Free resources
                setTimeout(
                  () => {
                    console.log( 'routeFragmentSubscription unsubscribe' );
                    routeFragmentSubscription.unsubscribe();
                }, 1000 );
              }
            }
          } );
    }

  }

}

然后，导航到my-app-route发送prodID主题标签

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component( {
   [...]
} )
export class MyOtherComponent {

  constructor( private router: Router ) {}

  gotoHashtag( prodID: string ) {
    this.router.navigate( [ '/my-app-route' ], { fragment: prodID } );
  }

}

Answer 3

这种解决方法应该可以解决问题

<div [routerLink]="[]" fragment="destination">
  <a href="#destination">Go TO DIV</a>
</div>

Answer 4

这是一个非常简单的解决方案，对我有用：

在组件中，添加此方法：

navigateTo(location: string): void {
// location will be a valid CSS ID selector; i.e. it should be preceded with '#'
window.location.hash = location;
setTimeout(() => {
    document.querySelector(location).parentElement.scrollIntoView();
  });
}

在视图中， <a>标签将如下所示：

<a (click)="navigateTo('#destination')">Destination</a>

Answer 5

在看到这里的所有解决方案之后，我决定采用一个小而简单的指令。 这是我最终得到的：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({ selector: '[appAnchorTo]' })
export class AnchorToDirective {
  @Input() target: string;

  constructor(el: ElementRef) { el.nativeElement.style.cursor = 'pointer'; }

  @HostListener('click', ['$event'])
  onClick() { document.querySelector(this.target).scrollIntoView(); }
}

我们的想法是创建一些灵活的东西，可以附加到页面上的任何元素。

用法：

<a appAnchorTo target="#my-link">My Insights</a>
<div appAnchorTo target="#my-other-link">My Customers</div>

并且不要忘记在您的某个模块上声明该指令：

@NgModule({
    ...,
    declarations: [
        ...,
        AnchorToDirective,
    ]
})

Answer 6

您也可以使用此插件https://www.npmjs.com/package/ng2-page-scroll它会对给定的锚点进行动画滚动。

Answer 7

我在nmp-ngx-scroll-to中找到了非常有用的插件，这对我很有用。 不过它是为Angular 4+设计的，但也许有人会觉得这个答案很有帮助。