角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：父子组件属性绑定

回答

相关问题