Angular 应为方法 ngOnChanges 实现生命周期接口 OnChanges

Question

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

}

Answer 1

implements OnInit, OnChanges

丢失。每当您使用 Angular 生命周期挂钩时，您还应该将相应的实现接口添加到控制器 class.

Answer 2

ngOnChanges() function declared in the OnChanges interface accepts parameter of type SimpleChanges and not SimpleChange的参数。正如在其他答案的评论中提到的，在不实现 OnChanges 接口的情况下使用函数 ngOnChanges() 也将被 Angular 接受为生命周期挂钩。但是您收到的类型错误不会被抛出，这可能会导致其他问题。

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

ngOnChanges(changes: SimpleChanges) {
  ...
}

Angular 应为方法 ngOnChanges 实现生命周期接口 OnChanges

Angular Lifecycle Interface OnChanges should be implemented for method ngOnChanges

typescript

angular

angular-lifecycle-hooks