Angular同一组件query参数变更仅首次生效，二次点击视图不更新

问题根源 #

1. Angular 默认对相同路由的跳转不会重新销毁并创建组件，所以constructor和ngOnInit生命周期只会在首次加载组件时执行一次，后续query参数变化不会重新触发这两个钩子
2. 你把selectedgame的赋值逻辑写在了queryParamMap订阅回调的外部，只有首次加载组件时会执行一次，后续参数更新时订阅回调只会修改paramsObject，没有同步更新selectedgame，因此视图不会刷新
3. 参数解析的写法冗余，queryParamMap自带get()方法可以直接获取指定参数值

修复方案 #

直接修改组件ts文件代码即可，将参数赋值逻辑移到订阅回调内部，同时补充订阅销毁逻辑避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-cricket',
  templateUrl: './cricket.component.html',
  styleUrls: ['./cricket.component.css']
})
export class CricketComponent implements OnInit, OnDestroy {
  public selectedgame?: string;
  // 存储订阅对象用于后续销毁
  private querySubscription?: Subscription;

  constructor(public route: ActivatedRoute) { }

  ngOnInit(): void {
    this.querySubscription = this.route.queryParamMap.subscribe((params) => {
      // 直接获取query参数
      this.selectedgame = params.get('game') || undefined;
      // 需要每次参数变化触发的逻辑都写在这里即可
      alert(this.selectedgame);
      console.log(this.selectedgame + " Hello..");
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    this.querySubscription?.unsubscribe();
  }
}

如果修改后还是不生效，可以在应用路由配置的根路由中添加onSameUrlNavigation: 'reload'配置：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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