Angular Lifecycle Interface OnChanges 应该为方法 ngOnChanges 实现

Posted 2023-03-13

【中文标题】Angular Lifecycle Interface OnChanges 应该为方法 ngOnChanges 实现

【英文标题】：Angular Lifecycle Interface OnChanges should be implemented for method ngOnChanges

【发布时间】：2021-10-04 07:51:22

【问题描述】：

Tslint 正在发送一个警告，指出应该为方法 ngOnChagnes 生命周期挂钩实现 OnChanges。如果我将ngOnChanges 更改为OnChanges，则警告不存在。

import  Component, Input, OnInit, Output, EventEmitter, SimpleChange, OnChanges  from '@angular/core';

import  Order  from '../../../../core/orders';

import  CartItem  from '../../../../core/orders';
import  User  from '../../../../core/auth/_models/user.model';

declare var $: any;

@Component(
  selector: 'app-order-summary',
  templateUrl: './order-summary.component.html',
  styleUrls: ['./order-summary.component.scss']
)
export class OrderSummaryComponent implements OnInit, OnChanges 
  @Input() cartDetails: Order;
  @Input() sellerDetail: User;
  @Input() productCost: number;
  @Output() closeOrderSummary = new EventEmitter<string>();
  @Output() checkoutCart = new EventEmitter<string>();
  @Output() updateItemQty = new EventEmitter<string>();
  @Output() updateProductSelected = new EventEmitter<string>();

  cartList: CartItem[] = [];
  isCartEmpty: boolean;

  constructor() 

  ngOnChanges(changes: SimpleChange) 
    for (const propName in changes) 
      if (propName === 'cartDetails') 
        const change = changes[propName];
        this.cartList = change.currentValue;
        this.isCartEmpty = (change.currentValue.length === 0);
      
    
  

  ngOnInit(): void 
  

  onUpdateItemCount(item, direc) 
    const payload =  item, direc ;
    this.updateItemQty.emit(payload);
  

  onUpdateProductSelected(value, item) 
    const payload =  value, item;
    this.updateProductSelected.emit(payload);
  

  goBackToMain() 
    this.closeOrderSummary.emit();
  

  onCheckoutCart() 
    this.checkoutCart.emit();
  




 

【参考方案1】：

implements OnInit, OnChanges

不见了。每当您使用 Angular 生命周期钩子时，您还应该将相应的 implements 接口添加到控制器类。

【讨论】：

我已将 Onchanges 添加到实现接口中，并在上面的代码中进行了更新。现在我得到“属性'ngOnChagnes'int类型'OrderSummaryComponent'不可分配给基本类型'OnChanges'中的相同属性

在我将界面从 SimpleChange 更改为 SimpleChanges 之后，它就可以工作了。非常感谢。

这不是真的。我目前找不到该文档，但接口仅用于指导（如命名和语法）。没有实现接口 implements OnChanges 的函数 ngOnChanges() 将完全被 Angular 接受为生命周期钩子。

@MichaelD 这就是为什么我写了“应该”而不是“必须” - 是的，没有接口，Angular 完全没问题，因为 Angular 是在运行时评估的，而 TS 已经被转译了。然而，这是您必须进行的最佳实践和默认设置 - 因此您应该。它还有助于防止其他错误，正如您在 Amar 之前的评论中可以立即看到的那样；）我正在简化答案，因为我认为有必要匹配 OP 的范围并抽象出不需要的细节。

【参考方案2】：

OnChanges 接口中声明的ngOnChanges() 函数的参数接受SimpleChanges 类型的参数，而不是SimpleChange。正如其他答案的评论中所提到的，在不实现 OnChanges 接口的情况下使用函数 ngOnChanges() 也将被 Angular 接受为生命周期钩子。但是您收到的类型错误不会被抛出，这可能会导致其他问题。

import  Component, Input, OnInit, Output, EventEmitter, SimpleChanges, OnChanges  from '@angular/core';

ngOnChanges(changes: SimpleChanges) 
  ...

【讨论】：

感谢您的信息。这确实帮助我理解了这个问题。

这并没有解决最初的问题。当 TSLint 告诉您应该实现 OnChanges 这就是您应该做的（或更改 TSLint 配置）时 - 所述也是这里的一个问题，但不是 OP 最初要求的问题 :)

@PatrickKelleter：现在我知道问题出在哪里了。在原始问题中，OP 没有实现 OnChanges 接口。这就是你所看到的，你的答案解决了这个问题。然而不久之后，OP 包含了OnChanges 接口。这就是我在回答中看到并解决的问题。

@MichaelD 哦，我知道你是对的，感谢您指出这一点。 @AmarShakya 调整您的问题代码以适应解决方案并不是一个好主意，因为它会改变帖子的动态，并且会使后来的访问者感到困惑，而不是帮助:)