Router.link 将最初导航到组件，但不会渲染另一个答案

【问题标题】：Router.link will initally navigate to component, but then won't render anotherRouter.link 将最初导航到组件，但不会渲染另一个
【发布时间】：2025-11-29 19:25:01
【问题描述】：

好的，我已经把这个放在 stackBlitz 中，所以 fork 项目，如果你找到解决这个问题的方法，请告诉我。我有一个导航组件，其中包含主页（登陆）的子组件和您可以链接到的每部特定电影的电影组件。您可以从导航栏的电影部分路由到这些，或者通过单击登录页面中的其中一部电影。我现在被卡住了，因为在单击其中一个链接后，我必须先导航回主页，然后才能单击另一个链接。当我已经导航到另一个 /film/:name 时，我无法使用导航链接导航到另一个，这很糟糕。我想学习如何解决这个问题，你们有什么建议吗？

以下是我添加到本地项目的一些更改：

pr`enter code here`ivate sub: Subscription;
ngOnInit() {
  this.film = this.route.snapshot.paramMap.get('name');
  this.sub = this.route.params.subscribe((_) => this.ngOnInit());
}

ngOnDestroy() {
  this.sub.unsubscribe;
}

我现在收到一个调用堆栈运行时错误，它经过 1000 次迭代后才最终加载到下一页

链接到我的代码：https://stackblitz.com/edit/angular-ivy-fyqmhc

兴趣点（*ngFor 导航链接、登陆链接）并查看审批模块以查看代码流程

【问题讨论】：

标签： angular typescript

【解决方案1】：

我在菜单添加斜线有两个变化

<div *ngFor="let film of films" [class]="'col-lg-3 col-md-5 col-sm-12'">
          <a [class]="'film'" [routerLink]="['/home/films/', film.name]">{{
            film.name
          }}</a>
        </div>

在电影中改变获得名字的方式

 //this.film = this.route.snapshot.paramMap.get('name');
        this.route.params.subscribe( data => {
          this.film = data.name;
          for (let i = 0; i < this.films.length; i++) {
          if (this.films[i].name == this.film) this.filmData = this.films[i].url;
        }
            console.log('this specific film data is:', this.filmData);
        })

希望对你有帮助

【讨论】：

这真是有趣的东西，从现在开始我会使用它，我对这些功能很陌生。谢谢大佬！

【解决方案2】：

您只需订阅 FilmComponent 中的参数更改即可重新触发您的 ngOnInit ：

constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(_ => this.ngOnInit());
  }

当然，在 subscribe 的 ngOnInit 中做你正在做的事情也会做同样的事情：

ngOnInit() {
    this.route.params.subscribe(_ => {
      this.film = this.route.snapshot.paramMap.get("name");
      for (let i = 0; i < this.films.length; i++) {
        if (this.films[i].name == this.film) this.filmData = this.films[i].url;
      }
      console.log("this specific film data is:", this.filmData);
    });
  }

这里是a similar post给你解释。基本上，它只是说导航到相同的基本 url 不会触发 DOM 更改，这意味着您的 FilmComponent 不会被破坏，因此不会重新触发 ngOnInit。

另外，不要忘记在ngOnDestroy() 中取消订阅。

这里是a fork of your project，经过修改（film.component.ts 的构造函数）。

【讨论】：