角2确定事件的处理
问题描述:
更新,以更好地说明什么,我试图做的:角2确定事件的处理
我想用一个反射式的方法基本上禁用某些功能和更新演示文稿,如果事件或不由父组件处理。
实施例:
想象GroceryCart的组件树与包含GroceryItem的列表。 GroceryItem输出onDelete和onQuantityEdit的事件。这些事件由GroceryItem发送到父GroceryCart组件以处理这些特定事件。
现在用户正在检出,并显示一个ConfirmCheckOut组件,其中包含一个GroceryItem列表。在ConfirmCheckOut组件中,用户不再删除项目或更新数量,因此ConfirmCheckOut组件不处理由GroceryItem发出的OnDelete或OnQuantityEdit事件。
如果GroceryItem知道它的父组件没有处理这些事件,那么它可以更新它自己的UI,以便隐藏功能。因此,如果父项是ConfirmCheckOut,则GroceryItem组件可以隐藏它的删除和更新数量按钮。如果父母是GroceryCart,则删除并更新数量按钮将在那里并可供用户使用。
有没有办法在Angular 2中做到这一点?
答
您可以尝试(我不建议)将父项注入您的子组件并检查它是您所需函数的原型。
export class ChildComponent {
private hasAddItem = false;
constructor(@Host() parentComponent: ParentComponent){
this.hasAddItem = !!parentComponent.protoType.addItem;
}
}
答
下面的代码出现在你的应用程序组件的HTML
<grocery-cart [cartItems]="selectedItems"> </grocery-cart>
<grocery-products (selectedItem)="handleSelecteditem($event)"> </grocery-products>
AppComponent应该处理的事件添加添加它的selectedItems变量如下
handleSelecteditem(item:Product){
this.selectedItems.push(item);
}
杂货店购物车应该包含代码如下面
template:`
<div *ngFor="let product in products">
<image >
<description>
</div>
<button (click)="checkout()"> Checkout </button>
`
@Input() cartItems :Array<Product>
杂货店的产品组件的代码必须看起来像
template:`
<div *ngFor="let product in products">
<image >
<description>
<button (click)="addToCart(product)"> Add to Cart </button>
</div>
`
变量:
@Output() selectedItem:EventEmitter<Product>=new EventEmitter<Product>();
products:Array<Product>;
方法:
addToCart(item : Product){
this.selectedItem.emit(item);
}
我已经创建了一个抽象如上,但这种变化基于多么复杂你的应用程序将是和架构
相当抽象。更具体的信息,比如具有代码的具体例子呢? –