javascript - 单击时 Angular 更新父 div 类

Question

我有以下代码，我希望在单击图像时更新父类。单击时图像将调用“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
}

Answer 1

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


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

在父组件中定义方法并做一个变量等于方法的结果例如:

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

如果您必须检查变量是否已更改其状态，请调用您需要检查的 ngDoCheck()。