# Dom插入(Scripts与Styles)
你可以使用@abp/ng.core包提供的 `DomInsertionService` 以简单的方式的插入脚本与样式.
## 入门
你不必在模块或组件级别提供 `DomInsertionService` ,因为它已经在**根中**提供. 你可以在组件,指令或服务中直接注入并使用它.
```js
import { DomInsertionService } from '@abp/ng.core';
@Component({
/* class metadata here */
})
class DemoComponent {
constructor(private domInsertionService: DomInsertionService) {}
}
```
## 用法
你可以使用 `DomInsertionService` 提供的 `insertContent` 方法去创建一个 `` 元素放置在 ``的末尾, `scriptElement` 类型是一个 `HTMLScriptElement`.
请参考[ContentStrategy](./Content-Strategy.md)查看所有可用的内容策略以及如何构建自己的内容策略.
> 重要说明: `DomInsertionService` 不会两次插入相同的内容. 为了再次添加内容你首先应该使用 `removeContent` 方法删除旧内容.
### 如何插入Styles
`insertContent` 方法的第一个参数需要一个 `ContentStrategy`. 如果传递 `StyleContentStrategy` 实例, `DomInsertionService` 将创建具有给定内容的 `` 元素放置在 ``的末尾, `styleElement` 类型是一个 `HTMLStyleElement`.
请参考[ContentStrategy](./Content-Strategy.md)查看所有可用的内容策略以及如何构建自己的内容策略.
.
> 重要说明: `DomInsertionService` 不会两次插入相同的内容. 为了再次添加内容你首先应该使用 `removeContent` 方法删除旧内容.
### 如何删除已插入的 Scripts & Styles
如果你传递 `HTMLScriptElement` 或 `HTMLStyleElement` 做为 `removeContent` 方法的第一个参数, `DomInsertionService` 将删除给定的元素.
```js
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);
}
}
```
在上面的示例中,销毁组件时,将从 `` 中删除 `` 元素.
## API
### insertContent
```js
insertContent(
contentStrategy: ContentStrategy,
): T
```
- `contentStrategy` 是方法的重要参数,已经在上方进行说明.
- 根据给定的策略返回 `HTMLScriptElement` 或 `HTMLStyleElement`.
### removeContent
```js
removeContent(element: HTMLScriptElement | HTMLStyleElement): void
```
- `element` 参数是已插入的 `HTMLScriptElement` 或 `HTMLStyleElement` 元素,它们应由 `insertContent` 方法返回.
### has
```js
has(content: string): boolean
```
`has` 返回一个布尔值,用于表示给定的内容是否插入到DOM.
- `content` 参数是 `HTMLScriptElement` 或 `HTMLStyleElement` 元素的内容.
## 下一步是什么?
- [ContentProjectionService](./Content-Projection-Service.md)