Winkel 2 (click) Iterationsvariable vorbei und [class.selected] vorbei Funktion

Question

Folgende genommen von ng-Buch 2

@Component({ 
    selector: 'products-list', 
    directives: [ProductRow], 
    inputs: ['productList'], 
    outputs: ['onProductSelected'], 
    template: ` 
    <div class="ui items"> 
    <product-row 
     *ngFor="let myProduct of productList" 
     [product]="myProduct" 
     (click)='clicked(myProduct)' 
     [class.selected]="isSelected(myProduct)"> 
    </product-row> 
    </div> 
    ` 
}) 
class ProductsList { 
    /** 
    * @input productList - the Product[] passed to us 
    */ 
    productList: Product[]; 

    /** 
    * @ouput onProductSelected - outputs the current 
    *   Product whenever a new Product is selected 
    */ 
    onProductSelected: EventEmitter<Product>; 

    /** 
    * @property currentProduct - local state containing 
    *    the currently selected `Product` 
    */ 
    currentProduct: Product; 

    constructor() { 
    this.onProductSelected = new EventEmitter(); 
    } 

    clicked(product: Product): void { 
    this.currentProduct = product; 
    this.onProductSelected.emit(product); 
    } 

    isSelected(product: Product): boolean { 
    if (!product || !this.currentProduct) { 
     return false; 
    } 
    return product.sku === this.currentProduct.sku; 
    } 

} 

@Component({ 
    selector: 'product-row', 
    inputs: ['product'], 
    ... not relevant to the question 
    ` 
}) 
class ProductRow { 
    product: Product; 
} 

Zwei Fragen,

Q1. wo es heißt

(click)='clicked(myProduct)' 

ist das Argument für geklickt das gleiche wie die Produkteigenschaft auf ProductRow-Komponente? Ich bin daran gewöhnt, $ Event zu übergeben. Warum sollte "myProduct" stattdessen übergeben werden?

Q2. wo es heißt

[class.selected]="isSelected(myProduct)" 

scheint es, wie wir

[class.selected]="false" 

für alle Produkte tun Cuz keiner von ihnen anfangs ausgewählt ist. Wie ist angular in der Lage, isSelected (myProduct) immer wieder aufzurufen? Wie entscheidet eckig, wann ein Aufruf von isSelected erfolgt?

Answer 1

Dies ist ein Beispiel für parent-child Kommunikation in angular2.

wenn Sie (click)='clicked(myProduct)' Ereignis verwenden, was im Wesentlichen Sie tun, ist emitting der Wert des ausgewählten Produktes @ouput onProductSelected Eigenschaft wie hier gezeigt:

this.onProductSelected.emit(product); 
$event` here would be equivalent to `#myProduct.value 

, wenn irgendein Ereignis ausgeführt wird, angular2 die Änderung Erkennungen Kicks-in ; Überprüfen aller Vorlagenausdruckwerte Anschließend aktualisiert es die Eigenschaftenbindung gemäß Wertänderungen. jetzt jedes Mal Wert von myProduct ändert, muss die Eigenschaft Bindung [class.selected] aktualisiert werden, daher isSelected Methode aufgerufen wird.