mirror of https://github.com/abpframework/abp
Merge pull request #3494 from abpframework/docs/insertion
Added DomInsertionService and ContentStrategy documentationspull/3509/head
Levent Arman Özak
5 years ago
committed by
GitHub
commit
5ef90a5e9a
@ -0,0 +1,95 @@
|
||||
# ContentStrategy
|
||||
|
||||
`ContentStrategy` is an abstract class exposed by @abp/ng.core package. It helps you create inline scripts or styles.
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### constructor
|
||||
|
||||
```js
|
||||
constructor(
|
||||
public content: string,
|
||||
protected domStrategy?: DomStrategy,
|
||||
protected contentSecurityStrategy?: ContentSecurityStrategy
|
||||
)
|
||||
```
|
||||
|
||||
- `content` is set to `<script>` and `<style>` elements as `textContent` property.
|
||||
- `domStrategy` is the `DomStrategy` that will be used when inserting the created element. (_default: AppendToHead_)
|
||||
- `contentSecurityStrategy` is the `ContentSecurityStrategy` that will be used on the created element before inserting it. (_default: None_)
|
||||
|
||||
Please refer to [DomStrategy](./Dom-Strategy.md) and [ContentSecurityStrategy](./Content-Security-Strategy.md) documentation for their usage.
|
||||
|
||||
|
||||
### createElement
|
||||
|
||||
```js
|
||||
createElement(): HTMLScriptElement | HTMLStyleElement
|
||||
```
|
||||
|
||||
This method creates and returns a `<script>` or `<style>` element with `content` set as `textContent`.
|
||||
|
||||
|
||||
### insertElement
|
||||
|
||||
```js
|
||||
insertElement(): void
|
||||
```
|
||||
|
||||
This method creates and inserts a `<script>` or `<style>` element.
|
||||
|
||||
|
||||
## ScriptContentStrategy
|
||||
|
||||
`ScriptContentStrategy` is a class that extends `ContentStrategy`. It lets you **insert a `<script>` element to the DOM**.
|
||||
|
||||
## StyleContentStrategy
|
||||
|
||||
`StyleContentStrategy` is a class that extends `ContentStrategy`. It lets you **insert a `<style>` element to the DOM**.
|
||||
|
||||
|
||||
## Predefined Content Strategies
|
||||
|
||||
Predefined content strategies are accessible via `CONTENT_STRATEGY` constant.
|
||||
|
||||
|
||||
### AppendScriptToBody
|
||||
|
||||
```js
|
||||
CONTENT_STRATEGY.AppendScriptToBody(content: string)
|
||||
```
|
||||
|
||||
Creates a `<script>` element with the given content and places it at the **end** of `<body>` tag in the document.
|
||||
|
||||
|
||||
### AppendScriptToHead
|
||||
|
||||
```js
|
||||
CONTENT_STRATEGY.AppendScriptToHead(content: string)
|
||||
```
|
||||
|
||||
Creates a `<script>` element with the given content and places it at the **end** of `<head>` tag in the document.
|
||||
|
||||
|
||||
### AppendStyleToHead
|
||||
|
||||
```js
|
||||
CONTENT_STRATEGY.AppendStyleToHead(content: string)
|
||||
```
|
||||
|
||||
Creates a `<style>` element with the given content and places it at the **end** of `<head>` tag in the document.
|
||||
|
||||
|
||||
### PrependStyleToHead
|
||||
|
||||
```js
|
||||
CONTENT_STRATEGY.PrependStyleToHead(content: string)
|
||||
```
|
||||
|
||||
Creates a `<style>` element with the given content and places it at the **beginning** of `<head>` tag in the document.
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
- [DomInsertionService](./Dom-Insertion-Service.md)
|
||||
@ -0,0 +1,91 @@
|
||||
# How to Insert Scripts and Styles
|
||||
|
||||
You can use the `DomInsertionService` in @abp/ng.core package in order to insert scripts and styles in an easy and explicit way.
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
You do not have to provide the `DomInsertionService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
|
||||
|
||||
```js
|
||||
import { DomInsertionService } from '@abp/ng.core';
|
||||
|
||||
@Component({
|
||||
/* class metadata here */
|
||||
})
|
||||
class DemoComponent {
|
||||
constructor(private domInsertionService: DomInsertionService) {}
|
||||
}
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
You can use the `insertContent` method of `DomInsertionService` to create a `<script>` or `<style>` element with given content in the DOM at the desired position.
|
||||
|
||||
|
||||
### How to Insert Scripts
|
||||
|
||||
The first parameter of `insertContent` method expects a `ContentStrategy`. If you pass a `ScriptContentStrategy` instance, the `DomInsertionService` will create a `<script>` element with given `content` and place it in the designated DOM position.
|
||||
|
||||
```js
|
||||
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
|
||||
|
||||
@Component({
|
||||
/* class metadata here */
|
||||
})
|
||||
class DemoComponent {
|
||||
constructor(private domInsertionService: DomInsertionService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.domInsertionService.insertContent(
|
||||
CONTENT_STRATEGY.AppendScriptToBody('alert()')
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In the example above, `<script>alert()</script>` element will place at the **end** of `<body>`.
|
||||
|
||||
Please refer to [ContentStrategy](./Content-Strategy.md) to see all available content strategies and how you can build your own content strategy.
|
||||
|
||||
|
||||
### How to Insert Styles
|
||||
|
||||
If you pass a `StyleContentStrategy` instance as the first parameter of `insertContent` method, the `DomInsertionService` will create a `<style>` element with given `content` and place it in the designated DOM position.
|
||||
|
||||
```js
|
||||
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
|
||||
|
||||
@Component({
|
||||
/* class metadata here */
|
||||
})
|
||||
class DemoComponent {
|
||||
constructor(private domInsertionService: DomInsertionService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.domInsertionService.insertContent(
|
||||
CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}')
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In the example above, `<style>body {margin: 0;}</style>` element will place at the **end** of `<head>`.
|
||||
|
||||
Please refer to [ContentStrategy](./Content-Strategy.md) to see all available content strategies and how you can build your own content strategy.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### insertContent
|
||||
|
||||
```js
|
||||
insertContent(strategy: ContentStrategy): void
|
||||
```
|
||||
|
||||
`strategy` parameter is the primary focus here and is explained above.
|
||||
|
||||
|
||||
## What's Next?
|
||||
|
||||
- [TrackByService](./Track-By-Service.md)
|
||||
Loading…
Reference in new issue