在父元素上使用Angular指令来更改子元素的类？

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

@Directive({
  selector: '[changeClass]'
})
export class ChangeClassDirective {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  // 在这里实现指令的逻辑
}

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

@Directive({
  selector: '[changeClass]'
})
export class ChangeClassDirective {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  // 在这里实现指令的逻辑
  changeClass(className: string) {
    const childElement = this.elementRef.nativeElement.querySelector('.child-element');
    this.renderer.addClass(childElement, className);
  }
}

<div changeClass>
  <div class="child-element">子元素</div>
</div>

import { Component, ViewChild } from '@angular/core';
import { ChangeClassDirective } from './change-class.directive';

@Component({
  selector: 'app-parent',
  template: `
    <div changeClass>
      <div class="child-element">子元素</div>
    </div>
  `
})
export class ParentComponent {
  @ViewChild(ChangeClassDirective) changeClassDirective: ChangeClassDirective;

  changeChildClass() {
    this.changeClassDirective.changeClass('new-class');
  }
}