javascript - 单击时角度更新父 div 类
问题描述
我有以下代码,我希望在单击图像时更新父类。单击时图像将调用“SelectVariation”方法。有没有办法做到这一点?
组件.html:
<div class="clr-row">
<ng-container *ngFor="let variOption of product.variOptions">
<div class="card clickable clr-col-2 variationCard"
*ngFor="let variOptionTwo of variOption.variOptionTwos"> //Update this class
<div class="card-img" (click)="selectVariation(variOptionTwo.id, $event)">
<clr-tooltip>
<img src="{{variOptionTwo.url}}" class="variationImgScale" clrTooltipTrigger>
<clr-tooltip-content clrPosition="top-right" clrSize="m" *clrIfOpen>
<span>{{variOption.optName}} - {{variOptionTwo.optName}}</span>
</clr-tooltip-content>
</clr-tooltip>
</div>
</div>
组件.ts:
selectVariation(id: number, event: any) {
//Update parent class
}
解决方案
在子组件中使用
@Output() variableHere = new EventEmitter<>();
this.variableHere.emit(this.variableToSend);
然后在父级中将变量关联到 html 子模板定义中的方法:
<app-child (variableHere)="manageVariable($event)"></app-achild>
在父组件中定义方法并执行一个变量 equels 方法的结果,例如:
manageVariable(event) {
this.variableToUpdate = event;
}
如果您必须检查变量是否改变了他的状态,请调用您需要在 ngDoCheck() 中检查的内容。
推荐阅读
- c++ - 我的二传手在新课程中不起作用(继承)
- javascript - 在对象数组中添加新元素和删除元素
- python - 字符串包含 \n 并导致错误
- ngrx - ngrx 在效果期间两次调用减速器
- c# - 可移动的 Mahapps SimpleChildWindow
- mysql - 如何从两个数据库中查询数据并按范围分组结果
- java - 将 LocalDateTime 转换为时间戳格式
- firebase - Firestore 实时更新 1M 限制
- python - 建议在 tensorflow 2.0 中调试 `tf.data.Dataset` 操作
- php - 为什么 $post 在第三个代码中不是对象?