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

在Angular中，子组件加载时影响父组件的CSS可以通过以下几种方式实现：

使用@Input装饰器：在子组件中定义一个输入属性，通过@Input装饰器将其暴露给父组件。父组件可以通过绑定属性的方式将CSS样式传递给子组件。子组件可以在其模板中使用这些传递的CSS样式。

子组件代码示例：

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

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

父组件模板中使用子组件并传递CSS样式：

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

使用ViewChild装饰器：在父组件中使用ViewChild装饰器获取子组件的引用，然后可以直接修改子组件的CSS样式。

父组件代码示例：

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' };
  }
}

使用共享服务：创建一个共享服务，该服务包含一个可观察对象或行为主题，用于在父组件和子组件之间共享CSS样式。父组件可以通过该服务设置CSS样式，子组件可以订阅该可观察对象或行为主题以获取最新的CSS样式。

共享服务代码示例：

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$;
  }
}

这些方法可以根据具体需求选择使用，以实现子组件加载时影响父组件的CSS样式。