Route by adding listener if standing at same component Angular 4

Question

I would navigate between two products, localhost:4200/products/444 to localhost:4200/products/555.

The url changes when I navigate between them but nothing happened to the DOM, I'm still stuck at 444 product and the url is 555.

I'm using Angular 4

Are you sure there is no exception in the browser, open the developer console and check for errors — Tonio, Feb 12 '18 at 12:12

score 1 · Answer 1 · answered Feb 12 '18 at 12:17

It's because Angular reuses the component.

You have to subscribe to the route params to listen for changes and update the view accordingly.

  constructor(
    private route: ActivatedRoute,
  ) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      // put the logic of your component here
    });
  }

score 0 · Answer 2 · answered Feb 12 '18 at 13:23

Make your component look like this :

You must have called your function from constructor.

You need to get ID and call the function from ngOnInit.

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-comp',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) {
      this.myFunction(this.myID); // Remove this line from constructor     
    }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.myID = params['id'];
      this.myFunction(this.myID); // Add your function call in ngOnInit
    });
  }
}

To know the difference between constructor and ngOnInit please click here

Route by adding listener if standing at same component Angular 4

2 Answers2