抠丁客 抠丁客
项目
编辑 (2025/12/24)

向 DOM 插入脚本和样式

您可以使用 @abp/ng.core 包中的 DomInsertionService，以一种简单且明确的方式插入脚本和样式。

入门指南

您无需在模块或组件级别提供 DomInsertionService，因为它已经在根级别提供。您可以立即在组件、指令或服务中注入并开始使用它。

import { DomInsertionService } from '@abp/ng.core';
import { inject } from '@angular/core';

@Component({
  /* 类元数据放在这里 */
})
class DemoComponent {
  private domInsertionService = inject(DomInsertionService);
}

使用方法

您可以使用 DomInsertionService 的 insertContent 方法，在 DOM 的指定位置创建带有给定内容的 <script> 或 <style> 元素。此外，还有 projectContent 方法用于动态渲染组件和模板。

如何插入脚本

insertContent 方法的第一个参数需要一个 ContentStrategy。如果您传递一个 ScriptContentStrategy 实例，DomInsertionService 将创建一个带有给定 content 的 <script> 元素，并将其放置在指定的 DOM 位置。

import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
import { inject } from '@angular/core';

@Component({
  /* 类元数据放在这里 */
})
class DemoComponent {
  private domInsertionService = inject(DomInsertionService);

  ngOnInit() {
    const scriptElement = this.domInsertionService.insertContent(
      CONTENT_STRATEGY.AppendScriptToBody('alert()')
    );
  }
}

在上面的示例中，<script>alert()</script> 元素将被放置在 <body> 的末尾，并且 scriptElement 将是一个 HTMLScriptElement。

请参阅 ContentStrategy 以查看所有可用的内容策略以及如何构建您自己的内容策略。

重要提示：DomInsertionService 不会重复插入相同的内容。为了再次添加内容，您应首先使用 removeContent 方法删除旧内容。

如何插入样式

如果您将 StyleContentStrategy 实例作为 insertContent 方法的第一个参数传递，DomInsertionService 将创建一个带有给定 content 的 <style> 元素，并将其放置在指定的 DOM 位置。

import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
import { inject } from '@angular/core';

@Component({
  /* 类元数据放在这里 */
})
class DemoComponent {
  private domInsertionService = inject(DomInsertionService);

  ngOnInit() {
    const styleElement = this.domInsertionService.insertContent(
      CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}')
    );
  }
}

在上面的示例中，<style>body {margin: 0;}</style> 元素将被放置在 <head> 的末尾，并且 styleElement 将是一个 HTMLStyleElement。

请参阅 ContentStrategy 以查看所有可用的内容策略以及如何构建您自己的内容策略。

重要提示：DomInsertionService 不会重复插入相同的内容。为了再次添加内容，您应首先使用 removeContent 方法删除旧内容。

如何移除已插入的脚本和样式

如果您将已插入的 HTMLScriptElement 或 HTMLStyleElement 元素作为 removeContent 方法的第一个参数传递，DomInsertionService 将移除给定的元素。

import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
import { inject } from '@angular/core';

@Component({
  /* 类元数据放在这里 */
})
class DemoComponent {
  private domInsertionService = inject(DomInsertionService);
  private styleElement: HTMLStyleElement;

  ngOnInit() {
    this.styleElement = this.domInsertionService.insertContent(
      CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}')
    );
  }

  ngOnDestroy() {
    this.domInsertionService.removeContent(this.styleElement);
  }
}

在上面的示例中，当组件被销毁时，<style>body {margin: 0;}</style> 元素将从 <head> 中移除。

API

insertContent

insertContent<T extends HTMLScriptElement | HTMLStyleElement>(
  contentStrategy: ContentStrategy<T>,
): T
  • contentStrategy 参数是这里的重点，上面已经解释过。
  • 根据给定的策略返回 HTMLScriptElement 或 HTMLStyleElement。

removeContent

removeContent(element: HTMLScriptElement | HTMLStyleElement): void
  • element 参数是已插入的 HTMLScriptElement 或 HTMLStyleElement 元素，由 insertContent 方法返回。

has

has(content: string): boolean

has 方法返回一个布尔值，指示给定内容是否已添加到 DOM 中。

  • content 参数是已插入的 HTMLScriptElement 或 HTMLStyleElement 元素的内容。
在本文档中