首页 > 解决方案 > 单击时角度更新父 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
}

标签: javascripthtmlcssangular

解决方案


在子组件中使用
@Output() variableHere = new EventEmitter<>(); this.variableHere.emit(this.variableToSend);

然后在父级中将变量关联到 html 子模板定义中的方法: <app-child (variableHere)="manageVariable($event)"></app-achild>

在父组件中定义方法并执行一个变量 equels 方法的结果,例如:

manageVariable(event) {
   this.variableToUpdate = event;
 }

如果您必须检查变量是否改变了他的状态,请调用您需要在 ngDoCheck() 中检查的内容。


推荐阅读