Angular 2: привязка родительского и дочернего компонента

Question

Как ваше свойство связывает дочерний компонент? Я хочу сделать мою переменную high в false or !this.high через его родительский компонент, но дело в том, что ребенок зацикливается

приложение-продукт

<button class="ui primary small button"(click)="clearVals()">Clear Selected</button>
<app-product-list [dataSource]="data"></app-product-list>


@ViewChild(ProductListComponent) prodList: ProductListComponent;
clearVals() {
    this.selectedOutsourced = this.selectedPrice = 0;
    this.prodList.clear();
    this.selectedArray = [];
}

приложение-продукт-лист

<div class="products-cards" *ngFor="let product of dataSource['docs']">
      <app-product-card [product]="product"(highlightEvent)="highlight($event)">
      </app-product-card>
</div>


@ViewChild(ProductCardComponent) prodCard: ProductCardComponent;

приложение-продукт-карта

<div class="list card ui" (click)="highlight()" [class.selected]="high"> </div>


high : boolean = false;
highlight(){
     this.high = !this.high;
}

Это порядок воспитания детей. Самым верхним является родитель, вплоть до его потомка

Answer 1

Это забавно, я только что заметил, прочитав это, как 5 thimes.

Ваш div имеет *ngFor. Ваш ребенок находится в этом div, так что ребенок будет зацикливаться.

<div class="products-cards" *ngFor="let product of dataSource['docs']">
          <app-product-card [product]="product"(highlightEvent)="highlight($event)">
          </app-product-card>
    </div>

Должно быть

    <div class="products-cards" *ngFor="let product of dataSource['docs']">
        </div>
<app-product-card [product]="product"(highlightEvent)="highlight($event)">
              </app-product-card>

Тогда у вашего ребенка

@Input()
  set product(product: any) {
    highlightF(product);
  }

highlightf(product: any){
  this.hightlight.emit(product);
}

Теперь в твоих родителях:

//Do something to set product.highlight

Answer 2

Вам нужно изменить код в дочернем компоненте как

машинописная записьдочернего компонента app-product-card

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Input() product: any;

@Output() highlightEvent= new EventEmitter();

highlight(){
   this.highlightEvent.emit(somevalue);

}