[英]Angular 2: Parent-Child Component Property Binding
How do you property bind a child component? 您如何属性绑定子组件? I want to make my variable
high
to false or !this.high
through its parent component but the thing is, the child is being looped 我想通过其父组件将变量
high
为false or !this.high
,但事实是,孩子正在循环
app-product 应用产品
<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 = [];
}
app-product-list 应用产品列表
<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;
app-product-card 应用产品卡
<div class="list card ui" (click)="highlight()" [class.selected]="high"> </div>
high : boolean = false;
highlight(){
this.high = !this.high;
}
That is the order of the parenting. 那是育儿的顺序。 The topmost is the parent down to its child
最顶层是父母,直到子女
This one is funny I just noticed after reading this like 5 thimes. 在读完这5种丁香之后,我才发现这很有趣。
Your div has a *ngFor. 您的div有一个* ngFor。 Your child is in that div, So the child will be looped ofc.
您的孩子在那个div中,因此该孩子将被循环监禁。
<div class="products-cards" *ngFor="let product of dataSource['docs']">
<app-product-card [product]="product"(highlightEvent)="highlight($event)">
</app-product-card>
</div>
Should be 应该
<div class="products-cards" *ngFor="let product of dataSource['docs']">
</div>
<app-product-card [product]="product"(highlightEvent)="highlight($event)">
</app-product-card>
Then in your child 然后在你的孩子
@Input()
set product(product: any) {
highlightF(product);
}
highlightf(product: any){
this.hightlight.emit(product);
}
Now in your parent: 现在在您的父母中:
//Do something to set product.highlight
you need to change the code in child component as 您需要将子组件中的代码更改为
app-product-card child component typescript app-product-card子组件打字稿
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Input() product: any;
@Output() highlightEvent= new EventEmitter();
highlight(){
this.highlightEvent.emit(somevalue);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.