如何在Angular 5项目中更改带有CSS旋转图像的父div的样式？

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('parentDiv') parentDiv: ElementRef;

  constructor(private renderer: Renderer2) { }

  changeParentDivStyle() {
    const divElement = this.parentDiv.nativeElement;
    this.renderer.setStyle(divElement, 'transform', 'rotate(45deg)');
    this.renderer.setStyle(divElement, 'background-color', 'red');
    // 可以根据需要修改其他样式属性
  }
}

<div #parentDiv>
  <!-- 父div的内容 -->
</div>

<button (click)="changeParentDivStyle()">更改样式</button>