Angular 13中订阅URL fragment变更未触发事件问题

问题原因 #

当在同一个组件内导航（不重新加载组件）时，Angular不会销毁并重建组件实例。ActivatedRoute.fragment 可观测对象只会在组件初始化时发射一次初始值，后续的片段变更不会触发新的发射。

解决方案1：监听Router的NavigationEnd事件 #

通过监听路由的NavigationEnd事件，每次导航完成后获取当前的片段值：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html'
})
export class MyComponentComponent implements OnInit {
    constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

    ngOnInit(): void {
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe(() => {
            const fragment = this.activatedRoute.snapshot.fragment;
            console.log("test page: ", fragment);
        });
    }
}

解决方案2：结合ActivatedRoute.fragment与Router事件 #

如果你希望保留对fragment可观测对象的使用，同时捕获后续变更，可以将两者结合：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { combineLatest, filter } from 'rxjs';

@Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html'
})
export class MyComponentComponent implements OnInit {
    constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

    ngOnInit(): void {
        combineLatest([
            this.activatedRoute.fragment,
            this.router.events.pipe(filter(event => event instanceof NavigationEnd))
        ]).subscribe(([fragment]) => {
            const currentFragment = fragment || this.activatedRoute.snapshot.fragment;
            console.log("test page: ", currentFragment);
        });
    }
}

注意事项 #

更新片段时，请使用Angular Router的navigate方法，避免直接操作window.location.hash，否则不会触发路由事件：

// 正确更新片段的方式
this.router.navigate([], { fragment: 'new-fragment' });

内容的提问来源于stack exchange，提问作者Anker Peet