Angular ngOnit () 未按预期工作

Posted 2023-03-13

【中文标题】Angular ngOnit () 未按预期工作

【英文标题】：Angular ngOnit () is not working as expectedAngular ngOnit () 未按预期工作

【发布时间】：2020-02-19 15:09:36

【问题描述】：

我是 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,
];

【问题讨论】：

Angular2 : Call method/ngoninit when parameter of route changes的可能重复

【参考方案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'));    
        );
    

【参考方案2】：

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

constructor(private route: ActivatedRoute) 
...

然后使用：

route.params

【参考方案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);
    
  );