所以我使用以下帖子来弄清楚如何将片段添加到网址。
Angular2 Routing with Hashtag to page anchor
并且片段被添加正常,但页面不会移动到结果锚点。我尝试在目标name
上同时使用id
和div
属性,但似乎都不起作用。
我使用的是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
添加到自身。
答案 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+设计的,但也许有人会觉得这个答案很有帮助。