угловая 2 (щелчок) передача итерационной переменной и [class.selected] прохождение функции

10129 просмотра

1 ответ

Следующее взято из нг книги 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)'

аргумент для щелчка совпадает со свойством продукта в компоненте ProductRow? Я привык проходить событие $ для нажатия. Зачем передавать «myProduct» вместо этого?

Q2. где это говорит

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

кажется, что мы делаем

[class.selected]="false"

для всех продуктов, потому что ни один из них не выбран изначально. Как Angular может снова и снова вызывать isSelected (myProduct)? Как angular решает, когда вызывать isSelected?

Автор: abdullam Источник Размещён: 08.11.2019 10:55

Ответы (1)


0 плюса

это пример parent-childобщения в angular2.

когда вы используете (click)='clicked(myProduct)'событие, то, что вы по существу делаете, это emittingзначение выбранного продукта, использующего @ouput onProductSelectedсвойство, как показано здесь:

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

когда выполняется любое событие, запускается обнаружение изменений angular2; проверка всех значений выражения шаблона. Затем он обновляет привязку свойства в соответствии с изменениями значения. теперь при каждом myProductизменении значения привязка свойства [class.selected]должна обновляться, поэтому вызывается isSelectedметод.

Автор: candidJ Размещён: 20.08.2016 06:56
Вопросы из категории :
32x32