如何为父元素添加类购买单击子按钮Angular 8

<div class="parent-element">
  <!-- 子组件按钮 -->
  <app-child-button (click)="buy()"></app-child-button>
</div>

.parent-element {
  /* 添加样式 */
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  buy() {
    // 处理购买逻辑
    console.log('购买按钮被点击');
    // 可以在这里添加对父元素类的操作，例如：
    // const parentElement = document.querySelector('.parent-element');
    // parentElement.classList.add('purchased');
  }
}

import { Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  buy() {
    // 处理购买逻辑
    console.log('购买按钮被点击');
    // 添加对父元素类的操作
    const parentElement = this.elementRef.nativeElement.querySelector('.parent-element');
    this.renderer.addClass(parentElement, 'purchased');
  }
}

.parent-element.purchased {
  /* 添加购买后的样式 */
  background-color: #c8e6c9;
  border-color: #4caf50;
}