我试图在导航中突出显示您滚动过去的事件片段。
将片段和导航添加到片段很简单并且效果很好,例如:
class="nav-button unselectable"
matRipple
routerLink="/"
fragment="features"
[ngClass]="{ 'nav-active': (active_fragment | async) === 'features' }"
但是路由器显然不知道你正在滚动哪个元素,所以我试图监听滚动事件并使用 Y 位置检查最近的元素。但是我的登录页面不是我导航的子页面,因此 viewchild 不起作用,例如:
导航组件:
@ViewChild('features', { static: false })
private _features: ElementRef;
@HostListener('window:scroll', ['$event'])
private _update_active_fragment(event: any) {
event.preventDefault();
console.log(window.pageYOffset);
console.log(this._features.nativeElement);
}
登陆页面组件: <app-features #features id="features"></app-features>
但是特性原生元素是未定义的。我的问题是:
最佳答案
做了一个新的导航服务:
public active_fragment: BehaviorSubject<string> = new BehaviorSubject('');
constructor(private readonly route: ActivatedRoute) {
this.route.fragment.subscribe((frag) => {
this.active_fragment.next(frag);
});
}
在我的导航组件中: [ngClass]="{
'nav-active': (navigationService.active_fragment | async) === 'home'
}"
在包含我的片段的着陆组件中: @ViewChild('features', { read: ElementRef })
private _features: ElementRef;
@ViewChild('benefits', { read: ElementRef })
private _benefits: ElementRef;
@HostListener('window:scroll', ['$event'])
private _update_active_fragment(event: any) {
event.preventDefault();
switch (true) {
case window.pageYOffset >=
this._some_previous_element.nativeElement.offsetTop &&
window.pageYOffset <= this._features.nativeElement.offsetTop: {
this.navigationService.active_fragment.next('network-rail-feedback');
break;
}
case window.pageYOffset >= this._features.nativeElement.offsetTop &&
window.pageYOffset <= this._benefits.nativeElement.offsetTop: {
this.navigationService.active_fragment.next('features');
break;
}
default:
break;
}
}
关于javascript - 滚动经过片段时,Angular 10会获得路由器事件片段吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62992575/