在 Angular 6 中动态添加 CSS

在 Angular 6 中，可以使用 Renderer2 来动态创建和添加 CSS 样式。

步骤

1. 引入 Renderer2:

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

2. 在组件构造函数中注入 Renderer2:

constructor(private renderer: Renderer2) { }

3. 创建样式并添加到组件中:

ngOnInit() {
  const styles = `
    .box {
      border: 1px solid #ccc;
      padding: 10px;
    }
  `;
  const head = this.renderer.selectRootElement('head', true);
  const style = this.renderer.createElement('style');

  this.renderer.setProperty(style, 'innerHTML', styles);
  this.renderer.appendChild(head, style);
}

上述代码将创建一个样式 .box 和一个样式节点，并将节点添加到页面的头部区域中。

解释

• Renderer2.selectRootElement 用来选择文档中指定的元素，并返回一个元素引用。
• Renderer2.createElement 用来创建指定的元素，并返回一个元素引用。
• Renderer2.setProperty 用来设置元素的属性值。
• Renderer2.appendChild 用来将指定的元素作为子元素添加到另一个元素上。

总结

使用 Renderer2 可以轻松地在 Angular 6 应用程序中动态添加 CSS 样式。此方法可以满足许多特定场景下的需求，例如需要动态改变已有样式或添加全新样式规则的需求。

请记得，这种方法不仅可以用于添加样式，还可以用于添加其它元素、事件处理程序等等。祝您在 Angular 6 中编写出更加高效的代码！