Angular 2 festzustellen, ob Ereignis behandelt wird

Question

aktualisieren besser darzustellen, was ich zu tun versucht:

Ich mag eine Reflexionstyp-Methode verwenden, grundsätzlich bestimmte Funktionen zu deaktivieren und die Präsentation zu aktualisieren, wenn das Ereignis oder wird nicht von der übergeordneten Komponente behandelt.

Beispiel:

einen Komponentenbaum von GroceryCart Stellen mit einer Liste von GroceryItem enthält. Das GroceryItem hat Ereignisse von onDelete und onQuantityEdit ausgegeben. Diese Ereignisse werden vom GroceryItem an die übergeordnete GroceryCart-Komponente gesendet, um diese bestimmten Ereignisse zu behandeln.

Jetzt checkt der Benutzer aus und Sie zeigen eine ConfirmCheckOut-Komponente, die eine Liste von GroceryItem enthält. In der ConfirmCheckOut-Komponente löscht ein Benutzer keine Elemente mehr oder aktualisiert die Anzahl nicht mehr, sodass die ConfirmCheckOut-Komponente nicht die OnDelete- oder OnQuantityEdit-Ereignisse behandelt, die vom GroceryItem ausgegeben werden.

Wenn das GroceryItem wusste, dass seine übergeordnete Komponente diese Ereignisse nicht behandelte, konnte es seine eigene Benutzeroberfläche aktualisieren, sodass die Funktionalität ausgeblendet wurde. Wenn also das übergeordnete Element ConfirmCheckOut war, konnte die GroceryItem-Komponente die Schaltfläche zum Löschen und Aktualisieren von Mengen ausblenden. Wenn das Parent GroceryCart ist, sind Schaltflächen zum Löschen und Aktualisieren von Mengen vorhanden und für den Benutzer verfügbar.

Gibt es eine Möglichkeit, dies in Angular 2 zu tun?

Answer 1

Sie könnten versuchen (Ich empfehle nicht) injizieren die Eltern in Ihre Kind-Komponente und überprüfen, es ist der Prototyp für Ihre benötigten Funktionen.

export class ChildComponent { 
    private hasAddItem = false; 

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

Answer 2

Der Code unten ist in Ihrer App Komponente HTML

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

AppComponent das Ereignis behandeln sollte als die selectedItems Variable hinzufügen hinzufügen unter

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

Lebensmittel-Warenkorb-Code enthalten sollte wie unten

template:` 
    <div *ngFor="let product in products"> 
     <image > 
     <description> 
    </div> 
    <button (click)="checkout()"> Checkout </button> 
` 
@Input() cartItems :Array<Product> 

Lebensmittelprodukte Code-Komponente muss aussehen

template:` 
    <div *ngFor="let product in products"> 
     <image > 
     <description> 
     <button (click)="addToCart(product)"> Add to Cart </button> 
    </div> 
` 

Variablen:

@Output() selectedItem:EventEmitter<Product>=new EventEmitter<Product>(); 
products:Array<Product>; 

Methoden:

addToCart(item : Product){ 
     this.selectedItem.emit(item); 
    } 

I, wie oben eine abstrakte erstellt haben, aber diese Veränderungen auf, wie komplex Ihre Anwendung wird sein und die Architektur