角度2イベントが

Question

が良く、私がやろうとしています何を説明するために更新処理されるかどうかを判断：

イベントがある場合、私は基本的に特定の機能を無効にするには、反射型のメソッドを使用してプレゼンテーションを更新したいと思いますか親コンポーネントによって処理されません。

例：

はGroceryItemのリストが含まれているとGroceryCartのコンポーネントツリーを想像してみてください。 GroceryItemにはonDeleteとonQuantityEditの出力イベントがあります。これらのイベントは、特定のイベントを処理するために、GroceryItemによって親のGroceryCartコンポーネントに送信されます。

ユーザーがチェックアウトしていて、GroceryItemのリストを含むConfirmCheckOutコンポーネントが表示されています。 ConfirmCheckOutコンポーネントでは、ユーザーはアイテムの削除や量の更新を行わないため、ConfirmCheckOutコンポーネントはGroceryItemによって生成されたOnDeleteまたはOnQuantityEditイベントを処理しません。

GroceryItemがその親コン​​ポーネントがこれらのイベントを処理していないことを知っていた場合、そのUIは独自のUIを更新して機能を隠すことができます。したがって、親がConfirmCheckOutの場合、GroceryItemコンポーネントは削除および更新量ボタンを非表示にすることができます。親がGroceryCartの場合、削除ボタンと更新ボタンが表示され、ユーザーが利用できるようになります。

角度2でこれを行う方法はありますか？

Answer 1

試してみてください。お子様のコンポーネントに親を注入し、必要な機能のプロトタイプを確認してください。

export class ChildComponent { 
    private hasAddItem = false; 

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

Answer 2

以下のコードは、イベントを処理する必要があり

<grocery-cart [cartItems]="selectedItems"> </grocery-cart> 
<grocery-products (selectedItem)="handleSelecteditem($event)"> </grocery-products> 

AppComponentは、食料品・カートは、コードが含まれている必要があり

handleSelecteditem(item:Product){ 
    this.selectedItems.push(item); 
} 

以下のようにそれをselectedItemsの変数を追加する追加のアプリケーションコンポーネントのHTMLに存在しています以下のようになる。

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

私は上記のように要約を作成しているが、この変更はどのように複雑に基づきますあなたのアプリケーションは、アーキテクチャとなる予定です