如何获取对angular 2组件样式列表的引用/如何在组件中动态加载css

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

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

getComponentStyles() {
  const styles = this.renderer.querySelectorAll('style');
  console.log(styles);
}

<button (click)="getComponentStyles()">获取样式列表</button>

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

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

loadCSS(url: string) {
  const link = this.renderer.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = url;
  this.renderer.appendChild(document.head, link);
}

loadMyCSS() {
  this.loadCSS('path/to/my-styles.css');
}

<button (click)="loadMyCSS()">加载CSS文件</button>