[英]Angular Lifecycle Interface OnChanges should be implemented for method ngOnChanges
Tslint is sending a warning indicating that OnChanges
should be implemented for method ngOnChagnes
lifecycle hooks. Tslint 正在发送警告,指示应为方法
ngOnChagnes
生命周期挂钩实现OnChanges
。 If I change ngOnChanges
to OnChanges
then the warning is not there.如果我将
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();
}
}
implements OnInit, OnChanges
is missing.不见了。 whenever you use an Angular lifecycle hook you should also add the corresponding implements interface to the controller class.
每当您使用 Angular 生命周期钩子时,您还应该向控制器类添加相应的实现接口。
The parameter of ngOnChanges()
function declared in the OnChanges
interface accepts parameter of type SimpleChanges
and not SimpleChange
. OnChanges
接口中声明的ngOnChanges()
函数的参数接受类型为SimpleChanges
而不是SimpleChange
参数。 As mentioned in the comment of other answer, usage of function ngOnChanges()
without implementing the OnChanges
interface would also be accepted as a life-cycle hook by Angular.正如其他答案的评论中所提到的,在不实现
OnChanges
接口的情况下使用函数ngOnChanges()
也将被 Angular 接受为生命周期钩子。 But the type error you're receiving would not have been thrown, that could've led to other issues.但是您收到的类型错误不会被抛出,这可能会导致其他问题。
import { Component, Input, OnInit, Output, EventEmitter, SimpleChanges, OnChanges } from '@angular/core';
ngOnChanges(changes: SimpleChanges) {
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.