Angular中URL参数变化时组件未重载、页面标题不更新如何解决？

问题原因 #

同一组件内切换路由参数时，Angular会复用当前组件不会重新初始化，你在activatedRoute.params回调中设置标题的时机，早于全局路由标题自动更新逻辑的执行时机，导致你设置的正确标题被全局逻辑覆盖为父路由配置的默认值partners。
刷新/直接修改URL时，全局路由导航逻辑先执行完成，之后组件才初始化执行标题设置逻辑，所以不会被覆盖，表现正常。

可行解决方案 #

方案1：调整标题设置时机

改为监听路由导航结束事件后再执行标题设置，确保全局逻辑执行完成后再覆盖为自定义标题，组件修改示例：

// 新增导入依赖
import { NavigationEnd } from '@angular/router';
import { filter, distinctUntilChanged } from 'rxjs';

// ngOnInit修改为如下逻辑
ngOnInit(): void {
    this.subscriptions.add(
        this.router.events
            .pipe(
                filter(event => event instanceof NavigationEnd),
                map(() => this.activatedRoute.snapshot.params.slug as string),
                distinctUntilChanged(), // 避免slug无变化时重复发起请求
                mergeMap((slug) => {
                    return this.httpService.getPartner(slug);
                }),
                tap((partner) => {
                    this.partner$.next(partner);
                    this.displayTranslatedProduct(partner.name);
                    this.windowService.scrollTop();
                }),
                catchError(() => {
                    void this.router.navigate(['pl', 'not-found'], { skipLocationChange: true });
                    return of(null);
                }),
            )
            .subscribe(),
    );
}

方案2：修改全局标题更新逻辑

检查RoutingTabTitleService的实现，如果你在该服务中全局订阅了路由事件自动更新标题，新增判断逻辑：当当前激活路由为partners/:slug层级时，跳过自动设置标题，交由组件内部自行处理。

方案3：使用Angular原生标题策略（推荐，Angular14+支持）

通过自定义TitleStrategy在路由层面统一处理标题，无需在组件内维护标题逻辑：

1. 给子路由新增自定义标识

const routes: Routes = [
    {
        path: ':slug',
        component: PartnerComponent,
        data: {
            useCustomPartnerTitle: true
        }
    },
];

2. 自定义TitleStrategy实现，匹配到对应标识时拉取合作伙伴信息拼接标题即可，适配所有路由场景。

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