Question

我有以下代码，我希望在单击图像时更新父类。单击该图像将调用“ SelectVariation”方法。有什么办法吗？

component.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>

component.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（）中进行检查。

Answer 2

利用EventEmitter与output成角度的优势

parent.component.html

<my-child-comp (onSelectVariation)="myVariation($event)" ></my-child-comp>

parent.component.ts

myVariation(myVars) {
    console.log(myVars)
}

child.component.html

<button (click)="onSelectVariation.emit(myData)">trigger variation</button>

child.component.ts

@Output() onSelectVariation = new EventEmitter();

您在output中定义的名称应用作父元素中主机元素中的事件

单击时有角更新父div类

2 个答案: