角2：父子組件屬性綁定

你如何綁定一個子組件？我要讓我的變量high到false or !this.high通過其父組件，但事實是，孩子被循環角2：父子組件屬性綁定

應用產品

<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; 
}

這是父母的順序。最上面的是父母向其子女

來源

2017-09-05 Char

什麼是「孩子繞環」即使是什麼意思？ – Carsten

你是否試圖將事件從小孩傳播給父母？ –

* ngFor @Carsten – Char

這一個很有趣，我剛剛看到這個像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

來源

2017-09-05 08:05:34 Swoox

你需要爲

更改子組件的代碼

應用產品卡子組件打字稿

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

@Input() product: any; 

@Output() highlightEvent= new EventEmitter(); 

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

}

來源

2017-09-05 08:08:36

角2：父子組件屬性綁定

回答

相關問題