Угловое обновление родительского div-класса при нажатии

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

Воспользуйтесь преимуществом 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, должно использоваться как событие в этом элементе хоста в родительском

Answer 2

В дочернем компоненте используйте
@Output() variableHere = new EventEmitter<>(); this.variableHere.emit(this.variableToSend);

Затем в родительском компоненте свяжите переменную с методом в определении html дочернего шаблона: <app-child (variableHere)="manageVariable($event)"></app-achild>

В родительском компоненте определитеметод и переменная do равны результату метода, например:

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

Если вам нужно проверить, изменила ли переменная свое состояние, вызовите то, что вам нужно проверить в ngDoCheck ().