Dom插入(Scripts与Styles)
你可以使用@abp/ng.core包提供的 DomInsertionService 以简单的方式的插入脚本与样式.
入门
你不必在模块或组件级别提供 DomInsertionService ,因为它已经在根中提供. 你可以在组件,指令或服务中直接注入并使用它.
import { DomInsertionService } from '@abp/ng.core';
@Component({
/* class metadata here */
})
class DemoComponent {
constructor(private domInsertionService: DomInsertionService) {}
}
用法
你可以使用 DomInsertionService 提供的 insertContent 方法去创建一个 <script> 或 <style> 元素到DOM的指定位置. 还有 projectContent 方法用于渲染组件和模板.
如何插入Scripts
insertContent 方法的第一个参数需要一个 ContentStrategy. 如果传递 ScriptContentStrategy 实例, DomInsertionService 将创建具有给定内容的 <script> 元素并放置在指定的DOM位置.
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
@Component({
/* class metadata here */
})
class DemoComponent {
constructor(private domInsertionService: DomInsertionService) {}
ngOnInit() {
const scriptElement = this.domInsertionService.insertContent(
CONTENT_STRATEGY.AppendScriptToBody('alert()')
);
}
}
在上面的示例中,将 <script>alert()</script> 元素放置在 <body>的末尾, scriptElement 类型是一个 HTMLScriptElement.
请参考ContentStrategy查看所有可用的内容策略以及如何构建自己的内容策略.
重要说明:
DomInsertionService不会两次插入相同的内容. 为了再次添加内容你首先应该使用removeContent方法删除旧内容.
如何插入Styles
insertContent 方法的第一个参数需要一个 ContentStrategy. 如果传递 StyleContentStrategy 实例, DomInsertionService 将创建具有给定内容的 <style> 元素并放置在指定的DOM位置.
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
@Component({
/* class metadata here */
})
class DemoComponent {
constructor(private domInsertionService: DomInsertionService) {}
ngOnInit() {
const styleElement = this.domInsertionService.insertContent(
CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}')
);
}
}
在上面的示例中,将 <style>body {margin: 0;}</style> 元素放置在 <head>的末尾, styleElement 类型是一个 HTMLStyleElement.
请参考ContentStrategy查看所有可用的内容策略以及如何构建自己的内容策略. .
重要说明:
DomInsertionService不会两次插入相同的内容. 为了再次添加内容你首先应该使用removeContent方法删除旧内容.
如何删除已插入的 Scripts & Styles
如果你传递 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);
}
}
在上面的示例中,销毁组件时,将从 <head> 中删除 <style>body {margin: 0;}</style> 元素.
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元素的内容.
08-09 五月
