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

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

订阅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'));    
        });
    }
}

Answer 2

在您的构造函数中添加 ActivatedRoute 服务：

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

然后使用：

route.params

Answer 3

如果您从一个组件导航到同一个组件，Angular 将不会再次创建和初始化该组件（因此不会再次调用 ngOnInit）。在这些情况下，您应该使用在组件应该显示新数据时发出新值的 Observable。

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