时间戳

首页 > 解决方案 > Router.link 将最初导航到组件，但不会渲染另一个

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

问题描述

好吧，我已经把这个放在 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 导航链接、登陆链接）并查看审批模块以查看代码流程

标签： angulartypescript

解决方案

您只需要订阅您的参数更改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);
    });
  }

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

另外，不要忘记在ngOnDestroy().

这是您的项目的一个分支，经过修改（film.component.ts 的构造函数）。

推荐阅读