我正在尝试在单击按钮上创建一个触发另一个组件的事件,如果再次单击它会减少组件(显示组件的一部分始终可见)。 我知道这可以通过[ngClass] ='hidden'和同一组件中的所有内容来完成,但我不确定它是否是模块化方面的最佳方式。 提前致谢
这是我的html:
<div class="daydetail">
<h1>Detail of the day</h1>
<button type="button" label="Click"(click)="display('my-displaychild')"></button>
<div>{{my-displaychild}}</div>
</div>
这是我的组成部分:
import { DisplayChildComponent } from './displaychild.component';
export class AppliV2Component {
display(vid:DisplayChildComponent) {
console.log(DisplayChildComponent);
}
}
答案 0 :(得分:15)
我认为您应该使用*ngIf
保持简单,并且您可以将布尔值传递给子组件,以使用@Input
装饰器隐藏您想要的部分
1.parent HTML
<div class="daydetail">
<h1>Detail of the day</h1>
<button type="button" label="Click" (click)="toggleChild()"></button>
<div>
<child-component [showMePartially]="showVar"></child-component>
</div>
</div>
2.parent组件
export class AppliV2Component {
showVar: boolean = true;
toggleChild(){
this.showVar = !this.showVar;
}
}
3.child组件
export class ChildComponent {
@Input() showMePartially: boolean;
// don't forget to import Input from '@angular/core'
}
4.child HTML
<div>
<h1> this part is always visible</h1>
</div>
<div *ngIf="showMePartially">
<h1> this part will be toggled by the parent component button</h1>
</div>
答案 1 :(得分:0)
我有产品api。我已经列出了它们。用户可以将此商品添加到购物车中。
<div>
<ul class="list-group">
<li *ngFor="let product of products" class="list-group-item">
<button (click)="addToCart(product)" class="btn btn-xs btn-primary pull-right">
<i class="glyphicon glyphicon-plus"></i>
Add To Cart
</button>
<h5><strong>{{product.productName}}</strong></h5>
<p> {{product.quantityPerUnit}}</p>
<h6>{{product.unitPrice}}</h6>
</li>
方法是这样的。
addToCart(product:Product){
this.addedProduct=product.productName;
this.notificationsService.success("Successfull",product.productName +" added to CART")
}