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

时间:2016-08-10 15:13:39

标签: html angular anchor angular2-routing

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

Angular2 Routing with Hashtag to page anchor

并且片段被添加正常,但页面不会移动到结果锚点。我尝试在目标name上同时使用iddiv属性,但似乎都不起作用。

我使用的是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>

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

如前所述,网址正确地将#destination添加到自身。

7 个答案:

答案 0 :(得分:14)

解决方法可能是在组件中编写一个函数,将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;
}

答案 1 :(得分: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 } );
  }

}

答案 2 :(得分:2)

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

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

答案 3 :(得分:2)

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

在组件中,添加此方法:

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>

答案 4 :(得分:2)

在看到所有解决方案之后,我决定采用一个小而简单的指令。这就是我最终得到的结果:

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,
    ]
})

答案 5 :(得分:1)

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

答案 6 :(得分:0)

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