角2确定事件的处理

更新，以更好地说明什么，我试图做的：角2确定事件的处理

我想用一个反射式的方法基本上禁用某些功能和更新演示文稿，如果事件或不由父组件处理。

实施例：

想象GroceryCart的组件树与包含GroceryItem的列表。 GroceryItem输出onDelete和onQuantityEdit的事件。这些事件由GroceryItem发送到父GroceryCart组件以处理这些特定事件。

现在用户正在检出，并显示一个ConfirmCheckOut组件，其中包含一个GroceryItem列表。在ConfirmCheckOut组件中，用户不再删除项目或更新数量，因此ConfirmCheckOut组件不处理由GroceryItem发出的OnDelete或OnQuantityEdit事件。

如果GroceryItem知道它的父组件没有处理这些事件，那么它可以更新它自己的UI，以便隐藏功能。因此，如果父项是ConfirmCheckOut，则GroceryItem组件可以隐藏它的删除和更新数量按钮。如果父母是GroceryCart，则删除并更新数量按钮将在那里并可供用户使用。

有没有办法在Angular 2中做到这一点？

来源

2017-02-27 JakeHova

相当抽象。更具体的信息，比如具有代码的具体例子呢？ –

您可以尝试（我不建议）将父项注入您的子组件并检查它是您所需函数的原型。

export class ChildComponent { 
    private hasAddItem = false; 

    constructor(@Host() parentComponent: ParentComponent){ 
     this.hasAddItem = !!parentComponent.protoType.addItem; 
    } 
}

来源

2017-02-27 17:45:21 chrispy

是的，我想到了这一点，但认为它打破了组件树架构，所以我不想这样做。我希望在子组件中有某种钩子来知道处理了哪些事件。我倾向于处理这个问题的方式是为组件定义一个功能对象，并将其作为输入参数。但是，随着时间的推移，这似乎是一种痛苦。只是希望有一个更简洁的方式来做到这一点。 – JakeHova

我认为这个问题领域将固有地创建缩放和可维护性问题。真正的答案是孩子不应该关心谁在处理那个事件。 – chrispy

这是我最初提出的问题的解决方案。我不认为这是正确的做法，因为它违反了关注的分离，所以我想我的问题的答案是：“可以做到这一点技术上，但不应该这样做”。 – JakeHova

下面的代码出现在你的应用程序组件的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); 
    }

我已经创建了一个抽象如上，但这种变化基于多么复杂你的应用程序将是和架构

来源

2017-02-27 19:49:42 Aravind

角2确定事件的处理

回答

相关问题