Angular ngOnit () {} не работает должным образом

Question

Я новичок в Angular и работаю в angular8. У меня есть компонент "заголовок", который имеет меню с какой-то категорией. После выбора категории под компонентом заголовка все продукты должны использовать API. Проблема в том, что после первого щелчка метод ngOnIt срабатывает, как и ожидалось, но когда я выбираю другую категорию, ничего не происходит.

Header.component.html

<ul>
<li class="nav-item">
  <a class="nav-link text-white" (click)="movetolist(4)">FITNESS &
                      SUPPLIMENTS</a>
</li>
<li class="nav-item">
  <a class="nav-link text-white" (click)="movetolist(5)">HEALTH CONDITIONS</a>
</li>
<li class="nav-item">
  <a class="nav-link text-white" (click)="movetolist(6)">HEALTHCARE DEVICES</a>
</li>
<li class="nav-item">
  <a class="nav-link text-white" (click)="movetolist(9)">PERSONAL CARE</a>
</li>
<li class="nav-item">
  <a class="nav-link text-white" (click)="getMedicine(8,'BABY PRODUCT')">BABY PRODUCT</a>
</li>
</ul>

Header.component.ts

movetolist(id) {
  console.log(id);
  this.rout.navigate(['/medicines', id]);
}

Список.component.html

<app-header></app-header>

<div class="row listpage">
  <div class="col-lg-3 col-md-3 col-sm-3" *ngFor="let product of ayurvedic" (click)="movetodetails(product.id)">
    <div class="box" align="center">
      <h6 style="text-align: right">ADD</h6>
      <a>
        <img src="{{product.medicine_photo}}" class="img-fluid">

        <div style="color: none">
          {{product.medicine_name}}</div>
        <div>
          MRP: &#8377;{{product.medicine_price}}</div>
      </a>
    </div>
  </div>

List.component.ts

ngOnInit() {

this.id = this.routs.snapshot.paramMap.get("id");
console.log(this.id);
    this.service.categories(this.id, this.from, this.to).subscribe(res => {
      if (res['status'] == 1) {
        this.ayurvedic = res['data'];
        console.log(this.ayurvedic);
     }
  });
}

App.routing.module.ts

const routes: Routes = [
  {path: 'medicines/:id', component: ListComponent},
];

Answer 1

добавить службу ActivatedRoute в свой конструктор:

constructor(private route: ActivatedRoute) {
...
}

и затем использовать:

route.params

Answer 2

Если вы переходите от одного компонента к одному и тому же компоненту, Angular не будет создавать и инициализировать этот компонент снова (поэтому ngOnInit больше не вызывается). В этих случаях вы должны работать с Observables, которые выдают новое значение, когда Компонент должен отображать новые данные.

ngOnInit() {
  this.route.paramMap.pipe(
    tap(params => this.id = params.get("id")),
    switchMap(params => this.service.categories(params.get("id"), this.from, this.to))
  ).subscribe(res => {
    if (res['status'] == 1) {
      this.ayurvedic = res['data'];
      console.log(this.ayurvedic);
    }
  });
}

Answer 3

подписаться route.params

import { ActivatedRoute } from '@angular/router';


export class ListComponent implements OnInit {
    constructor(
        private route: ActivatedRoute
    ) { }

    ngOnInit(){
        this.route.params.subscribe((params: Params) => {
            console.log(params.get('id'));    
        });
    }
}