Merge pull request #10300 from abpframework/auto-merge/rel-5-0/581

Merge branch dev with rel-5.0
4 years ago · af87736c1a
2 changed files with 24 additions and 13 deletions
--- a/docs/en/UI/Angular/Content-Strategy.md
+++ b/docs/en/UI/Angular/Content-Strategy.md
@ -11,13 +11,15 @@
 constructor(
  public content: string,
  protected domStrategy?: DomStrategy,
-  protected contentSecurityStrategy?: ContentSecurityStrategy
+  protected contentSecurityStrategy?: ContentSecurityStrategy,
+  protected options?: ElementOptions = {},
 )
 ```

 - `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_)
+- `options` can be used to pass any option to the element that will be created. e.g: `{ id: "some-id" }` (_default: empty object_)

 Please refer to [DomStrategy](./Dom-Strategy.md) and [ContentSecurityStrategy](./Content-Security-Strategy.md) documentation for their usage.

@ -57,7 +59,7 @@ Predefined content strategies are accessible via `CONTENT_STRATEGY` constant.
 ### AppendScriptToBody

 ```js
-CONTENT_STRATEGY.AppendScriptToBody(content: string)
+CONTENT_STRATEGY.AppendScriptToBody(content: string, options?: ElementOptions<HTMLScriptElement>)
 ```

 Creates a `<script>` element with the given content and places it at the **end** of `<body>` tag in the document.
@ -66,7 +68,7 @@ Creates a `<script>` element with the given content and places it at the **end**
 ### AppendScriptToHead

 ```js
-CONTENT_STRATEGY.AppendScriptToHead(content: string)
+CONTENT_STRATEGY.AppendScriptToHead(content: string, options?: ElementOptions<HTMLScriptElement>)
 ```

 Creates a `<script>` element with the given content and places it at the **end** of `<head>` tag in the document.
@ -75,7 +77,7 @@ Creates a `<script>` element with the given content and places it at the **end**
 ### AppendStyleToHead

 ```js
-CONTENT_STRATEGY.AppendStyleToHead(content: string)
+CONTENT_STRATEGY.AppendStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>)
 ```

 Creates a `<style>` element with the given content and places it at the **end** of `<head>` tag in the document.
@ -84,7 +86,7 @@ Creates a `<style>` element with the given content and places it at the **end**
 ### PrependStyleToHead

 ```js
-CONTENT_STRATEGY.PrependStyleToHead(content: string)
+CONTENT_STRATEGY.PrependStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>)
 ```

 Creates a `<style>` element with the given content and places it at the **beginning** of `<head>` tag in the document.
--- a/npm/ng-packs/packages/core/src/lib/strategies/content.strategy.ts
+++ b/npm/ng-packs/packages/core/src/lib/strategies/content.strategy.ts
@ -1,11 +1,16 @@
 import { ContentSecurityStrategy, CONTENT_SECURITY_STRATEGY } from './content-security.strategy';
 import { DomStrategy, DOM_STRATEGY } from './dom.strategy';

+export type ElementOptions<T extends HTMLScriptElement | HTMLStyleElement = any> = Partial<{
+  [key in keyof T]: T[key];
+}>;
+
 export abstract class ContentStrategy<T extends HTMLScriptElement | HTMLStyleElement = any> {
  constructor(
    public content: string,
    protected domStrategy: DomStrategy = DOM_STRATEGY.AppendToHead(),
    protected contentSecurityStrategy: ContentSecurityStrategy = CONTENT_SECURITY_STRATEGY.None(),
+    protected options: ElementOptions<T> = {},
  ) {}

  abstract createElement(): T;
@ -13,6 +18,10 @@ export abstract class ContentStrategy<T extends HTMLScriptElement | HTMLStyleEle
  insertElement(): T {
    const element = this.createElement();

+    if (this.options && Object.keys(this.options).length > 0) {
+      Object.keys(this.options).forEach(key => (element[key] = this.options[key]));
+    }
+
    this.contentSecurityStrategy.applyCSP(element);
    this.domStrategy.insertElement(element);

@ -39,16 +48,16 @@ export class ScriptContentStrategy extends ContentStrategy<HTMLScriptElement> {
 }

 export const CONTENT_STRATEGY = {
-  AppendScriptToBody(content: string) {
-    return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToBody());
+  AppendScriptToBody(content: string, options?: ElementOptions<HTMLScriptElement>) {
+    return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToBody(), undefined, options);
  },
-  AppendScriptToHead(content: string) {
-    return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToHead());
+  AppendScriptToHead(content: string, options?: ElementOptions<HTMLScriptElement>) {
+    return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToHead(), undefined, options);
  },
-  AppendStyleToHead(content: string) {
-    return new StyleContentStrategy(content, DOM_STRATEGY.AppendToHead());
+  AppendStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>) {
+    return new StyleContentStrategy(content, DOM_STRATEGY.AppendToHead(), undefined, options);
  },
-  PrependStyleToHead(content: string) {
-    return new StyleContentStrategy(content, DOM_STRATEGY.PrependToHead());
+  PrependStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>) {
+    return new StyleContentStrategy(content, DOM_STRATEGY.PrependToHead(), undefined, options);
  },
 };