Angular路由跳转异常求助：Film路由重复点击失效并触发栈溢出

我仔细看了你的项目情况，目前遇到两个核心问题：一是同组件路由跳转时参数不更新，二是你写的代码触发了无限递归导致调用栈溢出，咱们一步步来解决：

问题根源分析 #

1. 路由复用导致参数不更新：Angular默认会复用同一组件的路由实例，当你从/film/movieA跳转到/film/movieB时，因为都是加载FilmComponent，Angular不会销毁重建组件，所以最初的ngOnInit只执行一次，无法获取新的路由参数。
2. 无限递归的代码错误：你在ngOnInit里订阅路由参数后，回调中又调用了this.ngOnInit()——这会形成闭环：参数变化→触发回调→调用ngOnInit→重新订阅参数→再次触发回调→无限循环，最终导致调用栈超过迭代限制。

正确解决方案 #

方案1：手动订阅参数变化（避免递归） #

修改FilmComponent的代码，直接在订阅回调里更新film变量，不要递归调用ngOnInit，同时注意正确取消订阅：

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

@Component({
  selector: 'app-film',
  templateUrl: './film.component.html',
  styleUrls: ['./film.component.css']
})
export class FilmComponent implements OnInit, OnDestroy {
  film: string | null = null;
  private paramSubscription!: Subscription;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 获取初始路由参数
    this.film = this.route.snapshot.paramMap.get('name');
    // 订阅参数变化，直接更新变量
    this.paramSubscription = this.route.params.subscribe(params => {
      this.film = params['name'];
    });
  }

  ngOnDestroy() {
    // 注意：unsubscribe是方法，必须加括号调用
    this.paramSubscription.unsubscribe();
  }
}

方案2：使用Async管道（更简洁，无需手动管理订阅） #

利用Angular的async管道自动处理订阅和取消订阅，避免手动管理生命周期的麻烦：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-film',
  templateUrl: './film.component.html',
  styleUrls: ['./film.component.css']
})
export class FilmComponent {
  // 用Observable存储参数，交给async管道处理
  film$: Observable<string | null>;

  constructor(private route: ActivatedRoute) {
    this.film$ = this.route.paramMap.pipe(
      map(paramMap => paramMap.get('name'))
    );
  }
}

然后在组件模板中使用async管道渲染数据：

<h2>当前影片：{{ film$ | async }}</h2>

这样不仅解决了路由参数不更新的问题，还彻底避免了手动订阅可能带来的内存泄漏和语法错误（比如你之前漏写unsubscribe()的括号）。

额外注意点 #

• 检查你的导航链接：确保*ngFor生成的路由链接格式正确，比如<a [routerLink]="['/film', film.name]">{{ film.name }}</a>，这样能正确传递路由参数。
• 路由配置：你的AppRoutingModule里的{ path: 'film/:name', component: FilmComponent }配置是正确的，不需要修改。

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