Merge pull request abpframework#3722 from cnAbp/docs

Translate angular documents
freeradius-xx · Apr 23, 2020 · a5cc0c5 · a5cc0c5
2 parents 2ae3a8d + 499d0b9
commit a5cc0c5
Show file tree

Hide file tree

Showing 5 changed files with 248 additions and 1 deletion.
diff --git a/docs/zh-Hans/Specifications.md b/docs/zh-Hans/Specifications.md
@@ -0,0 +1,3 @@
+## 规约
+
+TODO..
diff --git a/docs/zh-Hans/UI/Angular/Projection-Strategy.md b/docs/zh-Hans/UI/Angular/Projection-Strategy.md
@@ -0,0 +1,179 @@
+# ProjectionStrategy
+
+`ProjectionStrategy` 是@abp/ng.core包暴露出的抽象类. 有三种扩展它的投影策略: `ComponentProjectionStrategy`, `RootComponentProjectionStrategy` 和 `TemplateProjectionStrategy`. 它们实现相同的方法和属性,均可以帮助你定义内容投影的工作方式.
+
+## ComponentProjectionStrategy
+
+`ComponentProjectionStrategy` 是扩展 `ProjectionStrategy` 的类. 它使你可以将**组件投影到容器中**.
+
+### constructor
+
+```js
+constructor(
+  component: T,
+  private containerStrategy: ContainerStrategy,
+  private contextStrategy?: ContextStrategy,
+)
+```
+
+- `component` 是你要投影的组件的类.
+- `containerStrategy` 是在投影组件时将使用的 `ContainerStrategy`.
+- `contextStrategy` 是将在投影组件上使用的 `ContextStrategy`. (默认值: None_)
+
+请参阅[ContainerStrategy](./Container-Strategy.md)和[ContextStrategy](./Context-Strategy.md)文档以了解其用法.
+
+### injectContent
+
+```js
+injectContent(injector: Injector): ComponentRef<T>
+```
+
+该方法准备容器,解析组件,设置其上下文并将其投影到容器中. 它返回一个 `ComponentRef` 实例,你应该保留该实例以便以后清除投影的组件.
+
+## RootComponentProjectionStrategy
+
+`RootComponentProjectionStrategy` 是扩展 `ProjectionStrategy` 的类. 它使你可以将**组件投影到文档中**,例如将其附加到 `<body>`.
+
+### constructor
+
+```js
+constructor(
+  component: T,
+  private contextStrategy?: ContextStrategy,
+  private domStrategy?: DomStrategy,
+)
+```
+
+- `component` 是你要投影的组件的类.
+- `contextStrategy` 是将在投影组件上使用的 `ContextStrategy`. (默认值: None_)
+- `domStrategy` 是插入组件时将使用的 `DomStrategy`. (默认值: AppendToBody_)
+
+请参阅[ContextStrategy](./Context-Strategy.md)和[DomStrategy](./Dom-Strategy.md)文档以了解其用法.
+
+### injectContent
+
+```js
+injectContent(injector: Injector): ComponentRef<T>
+```
+
+该方法解析组件,设置其上下文并将其投影到文档中. 它返回一个 `ComponentRef` 实例,你应该保留该实例以便以后清除投影的组件.
+
+## TemplateProjectionStrategy
+
+`TemplateProjectionStrategy` 是扩展 `ProjectionStrategy` 的类.它使你可以将**模板投影到容器中**.
+
+### constructor
+
+```js
+constructor(
+  template: T,
+  private containerStrategy: ContainerStrategy,
+  private contextStrategy?: ContextStrategy,
+)
+```
+
+- `template` 是你要投影的 `TemplateRef`.
+- `containerStrategy` 是在投影组件时将使用的 `ContainerStrategy`.
+- `contextStrategy` 是将在投影组件上使用的 `ContextStrategy`. (默认值: None_)
+
+请参阅[ContainerStrategy](./Container-Strategy.md)和[ContextStrategy](./Context-Strategy.md)文档以了解其用法.
+
+### injectContent
+
+```js
+injectContent(): EmbeddedViewRef<T>
+```
+
+该方法准备容器,并将模板及其定义的上下文一起投影到容器. 它返回一个 `EmbeddedViewRef` 实例,你应该保留该实例以便以后清除投影的模板.
+
+## 预定义的投影策略
+
+可以通过 `PROJECTION_STRATEGY` 常量访问预定义的投影策略.
+
+### AppendComponentToBody
+
+```js
+PROJECTION_STRATEGY.AppendComponentToBody(
+  component: T,
+  contextStrategy?: ComponentContextStrategy<T>,
+)
+```
+
+将给定上下文设置到组件并将放置在文档中 `<body>` 标签的**末尾**.
+
+### AppendComponentToContainer
+
+```js
+PROJECTION_STRATEGY.AppendComponentToContainer(
+  component: T,
+  containerRef: ViewContainerRef,
+  contextStrategy?: ComponentContextStrategy<T>,
+)
+```
+
+将给定上下文设置到组件并将放置在容器的**末尾**.
+
+### AppendTemplateToContainer
+
+```js
+PROJECTION_STRATEGY.AppendTemplateToContainer(
+  templateRef: T,
+  containerRef: ViewContainerRef,
+  contextStrategy?: ComponentContextStrategy<T>,
+)
+```
+
+将给定上下文设置到模板并将其放置在容器的**末尾**.
+
+### PrependComponentToContainer
+
+```js
+PROJECTION_STRATEGY.PrependComponentToContainer(
+  component: T,
+  containerRef: ViewContainerRef,
+  contextStrategy?: ComponentContextStrategy<T>,
+)
+```
+
+将给定上下文设置到组件并将其放置在容器的**开头**.
+
+### PrependTemplateToContainer
+
+```js
+PROJECTION_STRATEGY.PrependTemplateToContainer(
+  templateRef: T,
+  containerRef: ViewContainerRef,
+  contextStrategy?: ComponentContextStrategy<T>,
+)
+```
+
+将给定上下文设置到模板并将其放置在容器的**开头**.
+
+
+### ProjectComponentToContainer
+
+```js
+PROJECTION_STRATEGY.ProjectComponentToContainer(
+  component: T,
+  containerRef: ViewContainerRef,
+  contextStrategy?: ComponentContextStrategy<T>,
+)
+```
+
+清除容器,将给定的上下文设置到组件并放在**已清除**的容器中.
+
+### ProjectTemplateToContainer
+
+```js
+PROJECTION_STRATEGY.ProjectTemplateToContainer(
+  templateRef: T,
+  containerRef: ViewContainerRef,
+  contextStrategy?: ComponentContextStrategy<T>,
+)
+```
+
+清除容器,将给定的上下文设置到模板并放在**已清除**的容器中.
+
+## 另请参阅
+
+- [DomInsertionService](./Dom-Insertion-Service.md)
diff --git a/docs/zh-Hans/UI/Angular/Service-Proxies.md b/docs/zh-Hans/UI/Angular/Service-Proxies.md
@@ -1,3 +1,68 @@
 ## 服务代理
 
-TODO...
+从Angular应用程序中调用服务器中的REST端点是很常见的, 在这种情况下我们通常创建**服务**(在服务器端具有针对每个服务方法的方法)和**模型对象**(与服务器端[DTO](../../Data-Transfer-Objects)匹配).
+
+除了手动创建这样的服务器交互服务之外,我们还可以使用[NSWAG](https://github.com/RicoSuter/NSwag)之类的工具来为我们生成服务代理. 但使用NSWAG过程中我们遇到以下问题:
+
+* 它生成一个**大的单个.ts文件**,该文件存在一些问题;
+  * 当你的应用程序增长时,它会变的**越来越大**.
+  * 它不适合ABP框架的[模块化](../../Module-Development-Basics)方法
+* 它创建了一些**难看的代码**. 我们希望有一个干净的代码(就像我们手动编写一样).
+* 它不能生成在服务器端声明的相同**方法签名**(因为swagger.json并不完全反映后端服务的方法签名). 我们已经创建了一个端点公开了服务器端方法信息,以便客户端生成更好的一致的客户端代理.
+
+ABP CLI 的`generate-proxies` 命令在 `src/app` 文件夹中创建按模块名称分隔的文件夹,自动生成typescript客户端代理.
+
+在angular应用程序的**根文件夹**中运行以下命令:
+
+```bash
+abp generate-proxy
+```
+
+它只为你自己的应用程序的服务创建代理. 不会为你正在使用的应用程序模块的服务创建代理(默认情况下). 有几个选项,参见[CLI文档](../../CLI).
+
+使用 `--module all` 选项生成的文件如下所示:
+
+![generated-files-via-generate-proxy](./images/generated-files-via-generate-proxy.png)
+
+### Services
+
+每个生成的服务都与后端控制器匹配. 服务方法通过[RestService](./Http-Requests#restservice)调用后端API.
+
+在每个服务中都定义了一个名为 `apiName` 的变量(自v2.4起可用). `apiName` 与模块的 `RemoteServiceName` 匹配. 在每次请求时该变量将作为参数传递给 `RestService`. 如果环境中未定义微服务API, `RestService` 使用默认值. 请参阅[从应用程序配置中获取特定的API端点](./Http-Requests#how-to-get-a-specific-api-endpoint-from-application-config)
+
+服务的 `providerIn` 属性定义为 `'root'`. 因此无需将服务作为提供程序添加到模块. 你可以通过将服务注入到构造函数中来使用它,如下所示:
+
+```js
+import { AbpApplicationConfigurationService } from '../app/shared/services';
+
+//...
+export class HomeComponent{
+  constructor(private appConfigService: AbpApplicationConfigurationService) {}
+
+  ngOnInit() {
+    this.appConfigService.get().subscribe()
+  }
+}
+```
+
+Angular编译器会从最终输出中删除那些没有被注入的服务. 参见[摇树优化的提供者文档](https://angular.cn/guide/dependency-injection-providers#tree-shakable-providers).
+
+### Models
+
+生成的模型与后端中的dto匹配. 每个模型在 `src/app/*/shared/models` 文件夹生成一个类.
+
+`@abp/ng.core` 包有一些[基类](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/dtos.ts). 一些模型扩展了这些类.
+
+可以如下所示创建一个类的实例:
+
+```js
+import { IdentityRoleCreateDto } from '../identity/shared/models';
+//...
+const instance = new IdentityRoleCreateDto({name: 'Role 1', isDefault: false, isPublic: true})
+```
+
+可以选择将初始值传递给每个类构造函数.
+
+## 下一步是什么?
+
+* [HTTP请求](./Http-Requests)
diff --git a/docs/zh-Hans/UI/Angular/images/custom-settings.png b/docs/zh-Hans/UI/Angular/images/custom-settings.png
diff --git a/docs/zh-Hans/UI/Angular/images/generated-files-via-generate-proxy.png b/docs/zh-Hans/UI/Angular/images/generated-files-via-generate-proxy.png