Update content by changing the parameter of the URL with routerLink in Angular 7

Question

Update content by changing the parameter of the URL with routerLink in Angular 7

Navigation

#1 by (4 votes)

2

I'm working with Angular 7 and when changing the URL parameter I do not update the content because it does not reload the constructor or the ngOnInit, all the URLs call the same components for example CategoryComponent but depending on the parameter of the URL teach some products or others.

I explain it better with code.

Component Routering.

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: ':category', component: CategoryComponent },
  { path: '**', component: Error404Component }
];

I have a menu with a dropdown-menu

<div class="dropdown-menu" aria-labelledby="dropdownMenuCategory">
  <a class="dropdown-item" [routerLink]="['/robots-aspiradores']">Robots Aspiradores</a>
  <a class="dropdown-item" [routerLink]="['/patinetes-electricos']">Patinetes Eléctricos</a>
  <a class="dropdown-item" [routerLink]="['/cafeteras']">Cafeteras</a>
</div>

CategoryComponent builder

constructor( private _activatedRoute: ActivatedRoute, private _productService: ProductService ) {
    this.url = GLOBAL.url;
    this.categoryName = this._activatedRoute.snapshot.paramMap.get("category")
    this.getProductsCategory(this.categoryName);
    this.title = this.categoryName.replace('-', ' ').toUpperCase();
  }

I want that when you click on each option in the menu, I reload the constructor or ngOnInit but it only loads the first time I enter but if I move from one category page to another it does not load anymore I have to go to the HOME and enter another category to reload.

I do not know if I explained myself well, I hope so, hello and thank you.

typescript angular angular7 angular-router

asked by Agustin Navarro 27.12.2018 в 14:17

source

1 answer

Send phrase to web service using JSON Asp.net Mvc Datatable does not render correctly

score 4 · Accepted Answer

The first of all is to understand the life cycle of the components of Angular, so here I leave you an article that explains it in detail .

I will focus here on what is important: Angular does not destroy a component to create one of the same type in the same site, simply when the URL changes the change detection cycle is executed.

Therefore we have a compomente that is loaded with the URL "/:category" , where that :category is a variable parameter. Since the component's constructor only runs when an instance is created and your constructor has this form:

constructor( private _activatedRoute: ActivatedRoute, private _productService: ProductService ) {
    ...
    this.categoryName = this._activatedRoute.snapshot.paramMap.get("category")
    this.getProductsCategory(this.categoryName);
    ...
}

It turns out that you only look at the route once (you get the current route, a snapshot , and you act accordingly (loading the corresponding category).

But when the parameter varies your component does not find out because it is not observing (it is not subscribed to) the changes in the parameter. He looked at it once and forgot about it

Therefore I advise you to make the following changes:

export class CategoryComponent implements OnInit {

  //atributos
  category: string;
  title: string;
  url = GLOBAL.url;

  constructor( 
      private _activatedRoute: ActivatedRoute,
      private _productService: ProductService ) {
    //nada de código con lógica de angular aquí, es lo recomendado
  }

  ngOnInit() {
    this._activatedRoute.paramMap.subscribe((params: ParamMap) => {
      this.category = params.get('category');
      this.getProductsCategory(this.categoryName);
      this.title = this.categoryName.replace('-', ' ').toUpperCase();
    }
  }

  ... //resto de código
}

In this way any change in the URL will be detected by the component and will act as the first time.