应为方法 ngOnChanges 实现 Angular 生命周期接口 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 生命周期钩子时，您还应该向控制器类添加相应的实现接口。

Answer 2

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

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

ngOnChanges(changes: SimpleChanges) {
  ...
}