diff --git a/docs/zh-Hans/Specifications.md b/docs/zh-Hans/Specifications.md new file mode 100644 index 0000000000..f927c80255 --- /dev/null +++ b/docs/zh-Hans/Specifications.md @@ -0,0 +1,3 @@ +## 规约 + +TODO.. \ No newline at end of file diff --git a/docs/zh-Hans/UI/Angular/Projection-Strategy.md b/docs/zh-Hans/UI/Angular/Projection-Strategy.md index e69de29bb2..efcf8b4190 100644 --- 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 +``` + +该方法准备容器,解析组件,设置其上下文并将其投影到容器中. 它返回一个 `ComponentRef` 实例,你应该保留该实例以便以后清除投影的组件. + +## RootComponentProjectionStrategy + +`RootComponentProjectionStrategy` 是扩展 `ProjectionStrategy` 的类. 它使你可以将**组件投影到文档中**,例如将其附加到 ``. + +### 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 +``` + +该方法解析组件,设置其上下文并将其投影到文档中. 它返回一个 `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 +``` + +该方法准备容器,并将模板及其定义的上下文一起投影到容器. 它返回一个 `EmbeddedViewRef` 实例,你应该保留该实例以便以后清除投影的模板. + +## 预定义的投影策略 + +可以通过 `PROJECTION_STRATEGY` 常量访问预定义的投影策略. + +### AppendComponentToBody + +```js +PROJECTION_STRATEGY.AppendComponentToBody( + component: T, + contextStrategy?: ComponentContextStrategy, +) +``` + +将给定上下文设置到组件并将放置在文档中 `` 标签的**末尾**. + +### AppendComponentToContainer + +```js +PROJECTION_STRATEGY.AppendComponentToContainer( + component: T, + containerRef: ViewContainerRef, + contextStrategy?: ComponentContextStrategy, +) +``` + +将给定上下文设置到组件并将放置在容器的**末尾**. + +### AppendTemplateToContainer + +```js +PROJECTION_STRATEGY.AppendTemplateToContainer( + templateRef: T, + containerRef: ViewContainerRef, + contextStrategy?: ComponentContextStrategy, +) +``` + +将给定上下文设置到模板并将其放置在容器的**末尾**. + +### PrependComponentToContainer + +```js +PROJECTION_STRATEGY.PrependComponentToContainer( + component: T, + containerRef: ViewContainerRef, + contextStrategy?: ComponentContextStrategy, +) +``` + +将给定上下文设置到组件并将其放置在容器的**开头**. + +### PrependTemplateToContainer + +```js +PROJECTION_STRATEGY.PrependTemplateToContainer( + templateRef: T, + containerRef: ViewContainerRef, + contextStrategy?: ComponentContextStrategy, +) +``` + +将给定上下文设置到模板并将其放置在容器的**开头**. + + +### ProjectComponentToContainer + +```js +PROJECTION_STRATEGY.ProjectComponentToContainer( + component: T, + containerRef: ViewContainerRef, + contextStrategy?: ComponentContextStrategy, +) +``` + +清除容器,将给定的上下文设置到组件并放在**已清除**的容器中. + +### ProjectTemplateToContainer + +```js +PROJECTION_STRATEGY.ProjectTemplateToContainer( + templateRef: T, + containerRef: ViewContainerRef, + contextStrategy?: ComponentContextStrategy, +) +``` + +清除容器,将给定的上下文设置到模板并放在**已清除**的容器中. + +## 另请参阅 + +- [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 index 5c7e334891..29aafebdae 100644 --- a/docs/zh-Hans/UI/Angular/Service-Proxies.md +++ b/docs/zh-Hans/UI/Angular/Service-Proxies.md @@ -1,3 +1,68 @@ ## 服务代理 -TODO... \ No newline at end of file +从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) \ No newline at end of file diff --git a/docs/zh-Hans/UI/Angular/images/custom-settings.png b/docs/zh-Hans/UI/Angular/images/custom-settings.png index 32d7516849..05dd3f695a 100644 Binary files a/docs/zh-Hans/UI/Angular/images/custom-settings.png and b/docs/zh-Hans/UI/Angular/images/custom-settings.png differ 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 new file mode 100644 index 0000000000..77a120a35d Binary files /dev/null and b/docs/zh-Hans/UI/Angular/images/generated-files-via-generate-proxy.png differ