Merge pull request #3622 from cnAbp/Translate

Translate some of angular documents

docs/zh-Hans/UI/Angular/Container-Strategy.md

@@ -0,0 +1,87 @@
+# ContainerStrategy
+
+`ContainerStrategy` 是 @abp/ng.core 包暴露出的抽象类. 有两种扩展容器扩展策略: `ClearContainerStrategy` 和 `InsertIntoContainerStrategy`. 它们实现了相同的方法和属性,这两种策略都可以帮助你定义容器的准备方式和内容的投影位置.
+
+## API
+
+`ClearContainerStrategy` 是一个扩展了 `ContainerStrategy` 的类. 它允许你**将内容投影之前清除容器**.
+
+### 构造函数
+
+```js
+constructor(
+  public containerRef: ViewContainerRef,
+  private index?: number, // works only in InsertIntoContainerStrategy
+)
+```
+
+- `containerRef` 是在投影内容时使用的 `ViewContainerRef`.
+
+### getIndex
+
+```js
+getIndex(): number
+```
+
+该方法返回被 `0` 和 `containerRef` `length` 限制的给定索引. 对于没有索引的策略,它返回`0`.
+
+### prepare
+
+```js
+prepare(): void
+```
+
+此方法在内容投影之前调用. 基于使用的容器策略,它要么清除容器,要么什么都不做(空操作).
+
+## ClearContainerStrategy
+
+`ClearContainerStrategy` 是一个扩展了 `ContainerStrategy` 的类. 它允许你**将内容投影之前清除容器**.
+
+## InsertIntoContainerStrategy
+
+`InsertIntoContainerStrategy` 是一个扩展了 `ContainerStrategy` 的类. 它允许你**将内容投影到容器中的特定节点索引上**.
+
+## 预定义的容器策略
+
+可以通过 `CONTAINER_STRATEGY` 常量访问预定义的容器策略.
+
+### Clear
+
+```js
+CONTAINER_STRATEGY.Clear(containerRef: ViewContainerRef)
+```
+
+在内容投影之前清除给定的容器.
+
+
+### Append
+
+```js
+CONTAINER_STRATEGY.Append(containerRef: ViewContainerRef)
+```
+
+将投影内容附加到容器中.
+
+
+### Prepend
+
+```js
+CONTAINER_STRATEGY.Prepend(containerRef: ViewContainerRef)
+```
+
+将投影的内容预先写入容器中.
+
+### Insert
+
+```js
+CONTAINER_STRATEGY.Insert(
+  containerRef: ViewContainerRef,
+  index: number,
+)
+```
+
+将投影内容按照给定的索引(在`0` 到 `containerRef`的长度之间)插入到容器中.
+
+## 另请参阅
+
+- [ProjectionStrategy](./Projection-Strategy.md)

docs/zh-Hans/UI/Angular/Content-Projection-Service.md

@@ -1,3 +1,77 @@
 # 内容投影
 
-TODO...
+你可以使用位于@abp/ng.core包中的 `ContentProjectionService` 简单明确的投影内容.
+
+## 入门
+
+你不必在模块或组件级别提供 `ContentProjectionService`,因为它已经在**根中提供了**. 你可以在组件中注入并开始使用它. 为了获得更好的类型支持,你可以将迭代项目的类型传递给它.
+
+```js
+import { ContentProjectionService } from '@abp/ng.core';
+
+@Component({
+  /* class metadata here */
+})
+class DemoComponent {
+  constructor(private contentProjectionService: ContentProjectionService) {}
+}
+```
+
+## 用法
+
+你可以使用 `ContentProjectionService` 的 `projectContent` 方法在你的项目中动态的渲染组件和模板.
+
+### 如何将组件投影到根级别
+
+如果将 `RootComponentProjectionStrategy` 做为 `projectContent` 方法的第一个参数,那么 `ContentProjectionService` 会解析投影组件并放在根级别,它还为组件传递上下文.
+
+```js
+const strategy = PROJECTION_STRATEGY.AppendComponentToBody(
+  SomeOverlayComponent,
+  { someOverlayProp: "SOME_VALUE" }
+);
+
+const componentRef = this.contentProjectionService.projectContent(strategy);
+```
+
+在上面的示例中, `SomeOverlayComponent` 组件放置在 `<body>` 的**末尾**并返回 `ComponentRef`. 另外将应用给定的上下文,因此组件的 `someOverlayProp` 被设置为 `SOME_VALUE`.
+
+> 你应该总是返回 `ComponentRef` 实例,因为它是对投影组件的引用,在你需要时使用该引用销毁投影视图和组件实例.
+
+### 如何将组件和模板投影到容器中
+
+如果将 `ComponentProjectionStrategy` 或 `TemplateProjectionStrategy` 做为 `projectContent` 方法的第一个参数,并且传递 `ViewContainerRef` 做为策略的第二个参数传递. 那么 `ContentProjectionService` 把组件或模板投影到给定的容器中,它还为组件或模板传递上下文.
+
+```js
+const strategy = PROJECTION_STRATEGY.ProjectComponentToContainer(
+  SomeComponent,
+  viewContainerRefOfTarget,
+  { someProp: "SOME_VALUE" }
+);
+
+const componentRef = this.contentProjectionService.projectContent(strategy);
+```
+
+在上面的示例中,`viewContainerRefOfTarget`(它是一个`ViewContainerRef` 实例)将被清除,并把 `SomeComponent` 组件放在其中. 另外将应用给定的上下文,因此组件的 `someProp` 被设置为 `SOME_VALUE`.
+
+> 你应该总是返回 `ComponentRef` 或 `EmbeddedViewRef` ,因为它是对投影内容的引用,在你需要时使用该引用销毁它们.
+
+请参考[ProjectionStrategy](./Projection-Strategy.md)查看所有可用的投影策略以及如何构建自己的投影策略.
+
+## API
+
+### projectContent
+
+```js
+projectContent<T extends Type<any> | TemplateRef<any>>(
+    projectionStrategy: ProjectionStrategy<T>,
+    injector = this.injector,
+): ComponentRef<C> | EmbeddedViewRef<C>
+```
+
+- `projectionStrategy` 参数是此处的要点,在上面进行了说明.
+- `injector` 参数是 `Injector` 实例,你可以传递到投影内容. 在 `TemplateProjectionStrategy` 并没有使用到它.
+
+## 下一步是什么?
+
+- [TrackByService](./Track-By-Service.md)

docs/zh-Hans/UI/Angular/Content-Security-Strategy.md

@@ -0,0 +1,55 @@
+# ContentSecurityStrategy
+
+`ContentSecurityStrategy` 是@abp/ng.core包暴露出的抽象类. 它可以根据[内容安全策略](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)帮助你将内联脚本或样式标记为安全.
+
+## API
+
+### 构造函数
+
+```js
+constructor(public nonce?: string)
+```
+
+- `nonce` 启用将内联脚本或样式列入白名单,避免在[script-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script)和[style-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#Unsafe_inline_styles)指令中使用 `unsafe-inline`.
+
+### applyCSP
+
+```js
+applyCSP(element: HTMLScriptElement | HTMLStyleElement): void
+```
+
+该方法将上述属性映射到给定`element`.
+
+## LooseContentSecurityPolicy
+
+`LooseContentSecurityPolicy` 是扩展了 `ContentSecurityStrategy` 的类. 它需要 `nonce` 和带有给定 `<script>` 或 `<style>` 标记的标签.
+
+## NoContentSecurityPolicy
+
+`NoContentSecurityPolicy` 是扩展了 `ContentSecurityStrategy` 的类. 它不会将内联脚本和样式标记为安全. 你可以将其视为空操作的替代方案.
+s
+
+## 预定义内容安全策略
+
+可以通过 `CONTENT_SECURITY_STRATEGY` 常量访问预定义的内容安全策略.
+
+### Loose
+
+```js
+CONTENT_SECURITY_STRATEGY.Loose(nonce: string)
+```
+
+`nonce` 会被设置.
+
+### None
+
+```js
+CONTENT_SECURITY_STRATEGY.None()
+```
+
+什么都不会做.
+
+## 另请参阅
+
+- [DomInsertionService](./Dom-Insertion-Service.md)
+- [ContentStrategy](./Content-Strategy.md)

docs/zh-Hans/UI/Angular/Content-Strategy.md

@@ -0,0 +1,85 @@
+# ContentStrategy
+
+`ContentStrategy` 是@abp/ng.core包暴露出的抽象类. 它可以帮助您创建内联脚本或样式.
+
+## API
+
+### 构造函数
+
+```js
+constructor(
+  public content: string,
+  protected domStrategy?: DomStrategy,
+  protected contentSecurityStrategy?: ContentSecurityStrategy
+)
+```
+
+- `content` 是被设置为 `<script>` 和 `<style>` 元素的 `textContent` 属性.
+- `domStrategy` 是在插入创建的元素时将使用的 `DomStrategy` . (默认值: AppendToHead_)
+- `contentSecurityStrategy` 是 `ContentSecurityStrategy`, 在创建的元素插入使用它它.  (默认值: None_)
+
+请参考[DomStrategy](./Dom-Strategy.md)和[ContentSecurityStrategy](./Content-Security-Strategy.md)文档了解它们的用法.
+
+### createElement
+
+```js
+createElement(): HTMLScriptElement | HTMLStyleElement
+```
+
+该方法创建并且返回 `<script>` 或 `<style>` 元素, 将 `content` 设置为 `textContent`.
+
+### insertElement
+
+```js
+insertElement(): void
+```
+
+该方法创建并且插入一个 `<script>` 或 `<style>` 元素.
+
+## ScriptContentStrategy
+
+`ScriptContentStrategy` 是扩展了 `ContentStrategy` 的类. 你可以使用它将 **`<script>`元素插入DOM**.
+
+## StyleContentStrategy
+
+`StyleContentStrategy` 是扩展了 `ContentStrategy` 的类. 你可以使用它将 **`<style>`元素插入DOM**.
+
+## 预定义内容策略
+
+预定义的内容策略可以通过 `CONTENT_STRATEGY` 常量访问.
+
+### AppendScriptToBody
+
+```js
+CONTENT_STRATEGY.AppendScriptToBody(content: string)
+```
+
+创建具有给定内容的 `<script>` 元素, 并放置在文档中`<body>`标记的**末尾**.
+
+### AppendScriptToHead
+
+```js
+CONTENT_STRATEGY.AppendScriptToHead(content: string)
+```
+
+创建具有给定内容的 `<script>` 元素, 并放置在文档中`<head>`标签的**末尾**.
+
+### AppendStyleToHead
+
+```js
+CONTENT_STRATEGY.AppendStyleToHead(content: string)
+```
+
+创建具有给定内容的 `<style>` 元素, 并放置在文档中`<head>`标签的**末尾**.
+
+### PrependStyleToHead
+
+```js
+CONTENT_STRATEGY.PrependStyleToHead(content: string)
+```
+
+创建具有给定内容的 `<style>` 元素, 并放置在文档中`<head>`标签的**头部**.
+
+## 另请参阅
+
+- [DomInsertionService](./Dom-Insertion-Service.md)

docs/zh-Hans/UI/Angular/Context-Strategy.md

@@ -0,0 +1,100 @@
+# ContextStrategy
+
+`ContextStrategy` 是@abp/ng.core包暴露出的抽象类. 有三种扩展容器扩展策略: `ComponentContextStrategy` , `TemplateContextStrategy` 和 `NoContextStrategy`. 它们实现了相同的方法和属性,这三种策略都可以帮助你获得定义投影内容上下文
+
+## ComponentContextStrategy
+
+`ComponentContextStrategy` 是扩展了 `ContextStrategy` 的类, 它允许你**将上下文传递给一个投影组件**.
+
+### 构造函数
+
+```js
+constructor(public context: Partial<InferredInstanceOf<T>>) {}
+```
+
+- `T` 在这里引用组件类型, 例. `Type<C>`.
+- `InferredInstanceOf` 是 @abp/ng.core 包暴露的实用类型. 它可以推断组件.
+- `context` 是将映射到投影组件的属性.
+
+### setContext
+
+```js
+setContext(componentRef: ComponentRef<InferredInstanceOf<T>>): Partial<InferredInstanceOf<T>>
+```
+
+该方法将上下文的每个属性映射到具有相同名称的组件属性,并调用更改检测.映射后返回上下文.
+
+## TemplateContextStrategy
+
+`TemplateContextStrategy` 是扩展了 `ContextStrategy` 的类. 它允许你**将上下文传递到投影模板**.
+
+### 构造函数
+
+```js
+constructor(public context: Partial<InferredContextOf<T>>) {}
+```
+
+- `T` 在这里引用组件类型, 例. `Type<C>`.
+- `InferredInstanceOf` 是 @abp/ng.core 包暴露的实用类型. 它可以推断组件.
+- `context` 是将映射到投影组件的属性.
+
+### setContext
+
+```js
+setContext(): Partial<InferredContextOf<T>>
+```
+
+此方法不执行任何操作它仅返回上下文,因为模板上下文没有被映射. 而是作为参数传递给 `createEmbeddedView` 方法.
+
+## NoContextStrategy
+
+`NoContextStrategy` 是扩展了 `ContextStrategy` 的类. 它允许你**跳过将任何上下文传递到投影内容**.
+
+### 构造函数
+
+```js
+constructor()
+```
+
+不像其它的策略, `NoContextStrategy` 构造函数没有参数.
+
+### setContext
+
+```js
+setContext(): undefined
+```
+
+由于没有上下文,方法没有参数并且返回`undefined`.
+
+## 预定义上下文策略
+
+可以通过 `CONTEXT_STRATEGY` 常量访问预定义的上下文策略.
+
+### None
+
+```js
+CONTEXT_STRATEGY.None()
+```
+
+该策略不会将任何上下文传递到投影内容。
+
+### Component
+
+```js
+CONTEXT_STRATEGY.Component(context: Partial<InferredContextOf<T>>)
+```
+
+该策略将帮助你将给定的上下文传递到投影组件.
+
+
+### Template
+
+```js
+CONTEXT_STRATEGY.Template(context: Partial<InferredContextOf<T>>)
+```
+
+该策略将帮助你将给定的上下文传递到投影模板.
+
+## 另请参阅
+
+- [ProjectionStrategy](./Projection-Strategy.md)

docs/zh-Hans/UI/Angular/Dom-Strategy.md

@@ -0,0 +1,80 @@
+# DomStrategy
+
+`DomStrategy` 是@abp/ng.core包暴露出的抽象类. 它的实例定义了如何将元素附加到DOM以及如何被其它类(如`LoadingStrategy`)使用.
+
+## API
+
+### 构造函数
+
+```js
+constructor(
+  public target?: HTMLElement,
+  public position?: InsertPosition
+)
+```
+
+- `target` 是一个 HTMLElement (默认值: document.head_).
+- `position` 定义将创建的元素放置在何处. 可以在[此处](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement)找到所有可能的 `position` 值(默认值: 'beforeend'_).
+
+### insertElement
+
+```js
+insertElement(element: HTMLElement): void
+```
+
+该方法根据 `postion` 将给定 `元素` 插入到目标中.
+
+## 预定义DOM策略
+
+可以通过 `DOM_STRATEGY` 常量访问预定义的dom策略.
+
+
+### AppendToBody
+
+```js
+DOM_STRATEGY.AppendToBody()
+```
+
+`insertElement` 将给定 `元素` 放在 `<body>` 的末尾.
+
+
+### AppendToHead
+
+```js
+DOM_STRATEGY.AppendToHead()
+```
+
+`insertElement` 将给定 `元素` 放在 `<head>` 的末尾.
+
+### PrependToHead
+
+```js
+DOM_STRATEGY.PrependToHead()
+```
+
+`insertElement` 将给定 `元素` 放在 `<head>` 的头部.
+
+
+### AfterElement
+
+```js
+DOM_STRATEGY.AfterElement(target: HTMLElement)
+```
+
+`insertElement` 将给定 `元素` 放在 `target` 之后 (做为同级元素).
+
+### BeforeElement
+
+```js
+DOM_STRATEGY.BeforeElement(target: HTMLElement)
+```
+
+`insertElement` 将给定 `元素` 放在 `target` 之前 (做为同级元素).
+
+## 另请参阅
+
+- [DomInsertionService](./Dom-Insertion-Service.md)
+- [LazyLoadService](./Lazy-Load-Service.md)
+- [LoadingStrategy](./Loading-Strategy.md)
+- [ContentStrategy](./Content-Strategy.md)
+- [ProjectionStrategy](./Projection-Strategy.md)