Router.link will initally navigate to component, but then won't render another

Question

Alright I've got this put together in stackBlitz so fork the project and let me know if you find a way to fix this. I've got a nav component that has child components that are the home page(landing) and a film component for each specific film you can link to. You can route to these from the films section of the navbar, or by clicking on one of the films in the landing page. I'm stuck right now because after I click on one of the links, I must navigate back to the home page before I can click on another. I cannot use the nav link to navigate to another /film/:name when I've navigated to one already, and that's just bad. I wanna learn how to fix this, do you guys have any advice?

Here's some changes I added to my local project:

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;
}

I'm now getting a callstack runtime error, it goes through 1000 iterations before finally loading to the next page

link to my code: https://stackblitz.com/edit/angular-ivy-fyqmhc

points of interest (*ngFor nav links, landing links) and check out the approuting module to see the flow of code

Quentin Grisel · Answer 1 · 2020-07-19T00:57:43.243

You just need to subscribe to the params changes in your FilmComponent to retrigger your ngOnInit :

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

Of course, doing what you're doing in the ngOnInit inside of the subscribe would do the same :

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);
    });
  }

Here is a similar post giving you explanation. Basically, it just says that navigating to the same base url does not trigger a DOM change, which mean your FilmComponent is not destroyed, and therefore the ngOnInit isn't retriggered.

Also, don't forget to do the unsubscribe in the ngOnDestroy().

Here is a fork of your project with the modification (Constructor of film.component.ts).

score 0 · Answer 2 · answered Jul 18 '20 at 22:59

I have two change in menu add slash

<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>

in the films change the way obtain name

 //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);
        })

I hope it has been helpful

That's really interesting stuff, I'll use that from now on, I'm new to a bunch of these functions. Thanks man! — roninMo, Jul 19 '20 at 00:21

Router.link will initally navigate to component, but then won't render another

2 Answers2