Angular中点击同一链接后如何刷新模板内的随机数？

看起来你已经在尝试用onSameUrlNavigation处理同一URL的导航刷新了，不过还差最后一步来触发随机数的更新。我来帮你把整个流程补全：

第一步：完善组件逻辑，监听路由事件并更新随机数 #

你需要在组件里订阅路由的NavigationEnd事件，每次触发时重新生成随机数，同时记得清理订阅避免内存泄漏：

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit, OnDestroy {
  random: number;
  private routerSubscription: Subscription;

  constructor(private router: Router) {
    // 开启同一URL导航的重载模式
    this.router.onSameUrlNavigation = 'reload';
  }

  ngOnInit(): void {
    // 初始化随机数
    this.generateRandomNumber();

    // 订阅路由结束事件，只处理NavigationEnd类型的事件
    this.routerSubscription = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 每次导航结束（包括同一URL的重载）都重新生成随机数
      this.generateRandomNumber();
    });
  }

  ngOnDestroy(): void {
    // 销毁订阅，防止内存泄漏
    if (this.routerSubscription) {
      this.routerSubscription.unsubscribe();
    }
  }

  private generateRandomNumber(): void {
    this.random = Math.floor(Math.random() * 1000); // 生成0-999的随机数，可按需调整范围
  }
}

第二步：模板中绑定随机数 #

在about.component.html里直接绑定显示这个随机数即可：

<p>当前随机数：{{ random }}</p>
<!-- 示例导航链接 -->
<a routerLink="/about">点击刷新随机数</a>

额外说明 #

• onSameUrlNavigation: 'reload'会让Angular在同一URL导航时重新触发路由生命周期，但默认不会重新实例化组件，所以我们需要手动监听事件来更新数据。
• 使用filter操作符可以只处理NavigationEnd事件，避免不必要的逻辑执行。
• 组件销毁时取消订阅是Angular开发的最佳实践，能有效防止内存泄漏。

这样设置后，每次点击指向/about的链接，随机数都会重新生成并实时刷新显示啦！

内容的提问来源于stack exchange，提问作者geek pédagogique lcms