angular 2(点击)传递迭代变量和[class.selected]传递函数

Question

以下摘自ng-book 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;
}

两个问题，

Q1。它说的地方

(click)='clicked(myProduct)'

clicked 的参数是否与 ProductRow 组件的 product 属性相同？我习惯于将 $event 传递给 clicked。为什么要传递“myProduct”？

Q2。它说的地方

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

好像我们在做

[class.selected]="false"

对于所有产品，因为最初没有选择它们。Angular 是如何一次又一次地调用 isSelected(myProduct) 的？ Angular 如何决定何时调用 isSelected？

Answer 1

这是angular2中parent-child通信的一个例子。

当您使用 (click)='clicked(myProduct)' 事件时，本质上您所做的是使用 emitting 所选产品的值(value)@ouput onProductSelected 属性如下所示:

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

当任何事件被执行时，angular2 的变化检测就会启动；检查所有模板表达式值。然后它会根据值的变化更新属性绑定(bind)。现在每次 myProduct 的值发生变化时，属性绑定(bind) [class.selected] 都需要更新，因此调用 isSelected 方法。