我希望当子组件在angulara中加载时影响父组件的css

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

@Component({
  selector: 'app-child',
  template: `
    <div [ngStyle]="childStyles">Child Component</div>
  `,
})
export class ChildComponent {
  @Input() childStyles: any;
}

<app-child [childStyles]="{ 'color': 'red', 'font-size': '20px' }"></app-child>

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `,
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ngAfterViewInit() {
    // 修改子组件的CSS样式
    this.childComponent.childStyles = { 'color': 'red', 'font-size': '20px' };
  }
}

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class CssService {
  private cssStylesSubject = new BehaviorSubject<any>({});
  public cssStyles$ = this.cssStylesSubject.asObservable();

  setCssStyles(styles: any) {
    this.cssStylesSubject.next(styles);
  }
}

import { Component } from '@angular/core';
import { CssService } from './css.service';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="changeStyles()">Change Styles</button>
    <app-child></app-child>
  `,
})
export class ParentComponent {
  constructor(private cssService: CssService) {}

  changeStyles() {
    const styles = { 'color': 'red', 'font-size': '20px' };
    this.cssService.setCssStyles(styles);
  }
}

import { Component, OnInit } from '@angular/core';
import { CssService } from './css.service';

@Component({
  selector: 'app-child',
  template: `
    <div [ngStyle]="childStyles$ | async">Child Component</div>
  `,
})
export class ChildComponent implements OnInit {
  childStyles$: Observable<any>;

  constructor(private cssService: CssService) {}

  ngOnInit() {
    this.childStyles$ = this.cssService.cssStyles$;
  }
}