Dom插入(Scripts与Styles)

你不必在模块或组件级别提供 DomInsertionService ,因为它已经在根中提供. 你可以在组件,指令或服务中直接注入并使用它.

你可以使用 DomInsertionService 提供的 insertContent 方法去创建一个 <script> 或 <style> 元素到DOM的指定位置. 还有 projectContent 方法用于渲染组件和模板.

insertContent 方法的第一个参数需要一个 ContentStrategy. 如果传递 ScriptContentStrategy 实例, DomInsertionService 将创建具有给定内容的 <script> 元素并放置在指定的DOM位置.

import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
@Component({
  /* class metadata here */
})
class DemoComponent {
  ngOnInit() {
    const scriptElement = this.domInsertionService.insertContent(
      CONTENT_STRATEGY.AppendScriptToBody('alert()')
    );
  }
}

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

如何插入Styles

insertContent 方法的第一个参数需要一个 ContentStrategy. 如果传递 StyleContentStrategy 实例, DomInsertionService 将创建具有给定内容的 <style> 元素并放置在指定的DOM位置.

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

重要说明: DomInsertionService 不会两次插入相同的内容. 为了再次添加内容你首先应该使用 removeContent 方法删除旧内容.

如果你传递 HTMLScriptElement 或 HTMLStyleElement 做为 removeContent 方法的第一个参数, DomInsertionService 将删除给定的元素.

import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
@Component({
  /* class metadata here */
})
class DemoComponent {
  private styleElement: HTMLStyleElement;
  constructor(private domInsertionService: DomInsertionService) {}
  ngOnInit() {
    this.styleElement = this.domInsertionService.insertContent(
      CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}')
    );
  }
  ngOnDestroy() {
    this.domInsertionService.removeContent(this.styleElement);
  }
}

insertContent

• contentStrategy 是方法的重要参数,已经在上方进行说明.
• 根据给定的策略返回 HTMLScriptElement 或 HTMLStyleElement.

removeContent(element: HTMLScriptElement | HTMLStyleElement): void

• element 参数是已插入的 HTMLScriptElement 或 HTMLStyleElement 元素,它们应由 insertContent 方法返回.

has

has 返回一个布尔值,用于表示给定的内容是否插入到DOM.

• content 参数是 HTMLScriptElement 或 HTMLStyleElement 元素的内容.