mirror of https://github.com/abpframework/abp.git
2 changed files with 233 additions and 2 deletions
@ -0,0 +1,95 @@ |
|||||
|
# LoadingStrategy |
||||
|
|
||||
|
`LoadingStrategy` 是@abp/ng.core包暴露的抽象类. 扩展它的有两种加载策略: `ScriptLoadingStrategy` 和 `StyleLoadingStrategy`. 它们实现相同的方法和属性,这两种策略都可以帮助你定义延迟加载的工作方式. |
||||
|
|
||||
|
## API |
||||
|
|
||||
|
### constructor |
||||
|
|
||||
|
```js |
||||
|
constructor( |
||||
|
public path: string, |
||||
|
protected domStrategy?: DomStrategy, |
||||
|
protected crossOriginStrategy?: CrossOriginStrategy |
||||
|
) |
||||
|
``` |
||||
|
|
||||
|
- `path` 将 `<script>` 元素做为 `src` 与 `<link>` 元素做为 `href` 属性. |
||||
|
- `domStrategy` 是在插入创建的元素时将使用的 `DomStrategy`. (默认值: AppendToHead_) |
||||
|
- `crossOriginStrategy` 是 `CrossOriginStrategy`,它在插入元素之前在创建的元素上使用. (默认值: Anonymous_) |
||||
|
|
||||
|
请参阅[DomStrategy](./Dom-Strategy.md)和[CrossOriginStrategy](./Cross-Origin-Strategy.md)文档以了解其用法. |
||||
|
|
||||
|
### createElement |
||||
|
|
||||
|
```js |
||||
|
createElement(): HTMLScriptElement | HTMLLinkElement |
||||
|
``` |
||||
|
|
||||
|
该方法创建并返回 `path` 设置为 `src` 或 `href` 的 `<script>` 或 `<link>` 的元素. |
||||
|
|
||||
|
### createStream |
||||
|
|
||||
|
```js |
||||
|
createStream(): Observable<Event> |
||||
|
``` |
||||
|
|
||||
|
该方法创建并返回一个observable流,该流在成功时发出,在错误时抛出. |
||||
|
|
||||
|
## ScriptLoadingStrategy |
||||
|
|
||||
|
`ScriptLoadingStrategy` 是扩展 `LoadingStrategy` 的类. 它使你可以**延迟加载脚本**. |
||||
|
|
||||
|
## StyleLoadingStrategy |
||||
|
|
||||
|
`StyleLoadingStrategy` 是扩展 `LoadingStrategy` 的类. 它使你可以**延迟加载样式**. |
||||
|
|
||||
|
## 预定义的加载策略 |
||||
|
|
||||
|
可通过 `LOADING_STRATEGY` 常量访问预定义的加载策略. |
||||
|
|
||||
|
### AppendAnonymousScriptToHead |
||||
|
|
||||
|
```js |
||||
|
LOADING_STRATEGY.AppendAnonymousScriptToHead(src: string, integrity?: string) |
||||
|
``` |
||||
|
|
||||
|
将给定的参数和 `crossorigin="anonymous"` 设置为创建的 `<script>` 元素的属性,并放置在文档中 `<head>` 标签的**末尾**. |
||||
|
|
||||
|
### PrependAnonymousScriptToHead |
||||
|
|
||||
|
```js |
||||
|
LOADING_STRATEGY.PrependAnonymousScriptToHead(src: string, integrity?: string) |
||||
|
``` |
||||
|
|
||||
|
将给定的参数和 `crossorigin="anonymous"` 设置为创建的 `<script>` 元素的属性,并放置在文档中 `<head>` 标签的**开始**. |
||||
|
|
||||
|
### AppendAnonymousScriptToBody |
||||
|
|
||||
|
```js |
||||
|
LOADING_STRATEGY.AppendAnonymousScriptToBody(src: string, integrity?: string) |
||||
|
``` |
||||
|
|
||||
|
将给定的参数和 `crossorigin="anonymous"` 设置为创建的 `<script>` 元素的属性,并放置在文档中 `<body>` 标签的**末尾**. |
||||
|
|
||||
|
|
||||
|
### AppendAnonymousStyleToHead |
||||
|
|
||||
|
```js |
||||
|
LOADING_STRATEGY.AppendAnonymousStyleToHead(href: string, integrity?: string) |
||||
|
``` |
||||
|
|
||||
|
将给定的参数和 `crossorigin="anonymous"` 设置为创建的 `<style>` 元素的属性,并放置在文档中 `<head>` 标签的**末尾**. |
||||
|
|
||||
|
|
||||
|
### PrependAnonymousStyleToHead |
||||
|
|
||||
|
```js |
||||
|
LOADING_STRATEGY.PrependAnonymousStyleToHead(href: string, integrity?: string) |
||||
|
``` |
||||
|
|
||||
|
将给定的参数和 `crossorigin="anonymous"` 设置为创建的 `<style>` 元素的属性,并放置在文档中 `<head>` 标签的**开始**. |
||||
|
|
||||
|
## 另请参阅 |
||||
|
|
||||
|
- [LazyLoadService](./Lazy-Load-Service.md) |
||||
@ -1,3 +1,139 @@ |
|||||
# Localization |
# 本地化 |
||||
|
|
||||
TODO... |
在阅读本地化管道和本地化服务之前你应该了解本地化Key. |
||||
|
|
||||
|
本地化key格式由两个部分组成,分别是**资源名**和**Key** |
||||
|
`ResourceName::Key` |
||||
|
|
||||
|
> 如果你没有指定资源名称,它默认是在 `environment.ts` 中声明的 `defaultResourceName`. |
||||
|
|
||||
|
```js |
||||
|
const environment = { |
||||
|
//... |
||||
|
localization: { |
||||
|
defaultResourceName: 'MyProjectName', |
||||
|
}, |
||||
|
}; |
||||
|
``` |
||||
|
|
||||
|
所以这两个结果是一样的: |
||||
|
|
||||
|
```html |
||||
|
<h1>{%{{{ '::Key' | abpLocalization }}}%}</h1> |
||||
|
|
||||
|
<h1>{%{{{ 'MyProjectName::Key' | abpLocalization }}}%}</h1> |
||||
|
``` |
||||
|
|
||||
|
## 使用本地化管道 |
||||
|
|
||||
|
你可以使用 `abpLocalization` 管道来获取本地化的文本. 例: |
||||
|
|
||||
|
```html |
||||
|
<h1>{%{{{ 'Resource::Key' | abpLocalization }}}%}</h1> |
||||
|
``` |
||||
|
|
||||
|
管道将用本地化的文本替换Key. |
||||
|
|
||||
|
你还可以指定一个默认值,如下所示: |
||||
|
|
||||
|
```html |
||||
|
<h1>{%{{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}}%}</h1> |
||||
|
``` |
||||
|
|
||||
|
要使用插值,必须将插值作为管道参数给出. 例如: |
||||
|
|
||||
|
本地化数据存储在键值对中: |
||||
|
|
||||
|
```js |
||||
|
{ |
||||
|
//... |
||||
|
AbpAccount: { // AbpAccount is the resource name |
||||
|
Key: "Value", |
||||
|
PagerInfo: "Showing {0} to {1} of {2} entries" |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
所以我们可以这样使用Key: |
||||
|
|
||||
|
```html |
||||
|
<h1>{%{{{ 'AbpAccount::PagerInfo' | abpLocalization:'20':'30':'50' }}}%}</h1> |
||||
|
|
||||
|
<!-- Output: Showing 20 to 30 of 50 entries --> |
||||
|
``` |
||||
|
|
||||
|
### 使用本地化服务 |
||||
|
|
||||
|
首先应该从 **@abp/ng.core** 导入 `LocalizationService`. |
||||
|
|
||||
|
```js |
||||
|
import { LocalizationService } from '@abp/ng.core'; |
||||
|
|
||||
|
class MyClass { |
||||
|
constructor(private localizationService: LocalizationService) {} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
之后你就可以使用本地化服务. |
||||
|
|
||||
|
> 你可以将插值参数作为参数添加到 `instant()` 和 `get()` 方法中. |
||||
|
|
||||
|
```js |
||||
|
this.localizationService.instant('AbpIdentity::UserDeletionConfirmation', 'John'); |
||||
|
|
||||
|
// with fallback value |
||||
|
this.localizationService.instant( |
||||
|
{ key: 'AbpIdentity::UserDeletionConfirmation', defaultValue: 'Default Value' }, |
||||
|
'John', |
||||
|
); |
||||
|
|
||||
|
// Output |
||||
|
// User 'John' will be deleted. Do you confirm that? |
||||
|
``` |
||||
|
|
||||
|
要获取[_Observable_](https://rxjs.dev/guide/observable)的本地化文本,应该使用 `get` 方法而不是 `instant`: |
||||
|
|
||||
|
```js |
||||
|
this.localizationService.get('Resource::Key'); |
||||
|
|
||||
|
// with fallback value |
||||
|
this.localizationService.get({ key: 'Resource::Key', defaultValue: 'Default Value' }); |
||||
|
``` |
||||
|
|
||||
|
### 使用配置状态 |
||||
|
|
||||
|
要使用 `getLocalization` 方法,你应该导入 `ConfigState`. |
||||
|
|
||||
|
```js |
||||
|
import { ConfigState } from '@abp/ng.core'; |
||||
|
``` |
||||
|
|
||||
|
然后你可以按以下方式使用它: |
||||
|
|
||||
|
```js |
||||
|
this.store.selectSnapshot(ConfigState.getLocalization('ResourceName::Key')); |
||||
|
``` |
||||
|
|
||||
|
`getLocalization` 方法可以与 `本地化key` 和 [`LocalizationWithDefault`](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L34) 接口一起使用. |
||||
|
|
||||
|
```js |
||||
|
this.store.selectSnapshot( |
||||
|
ConfigState.getLocalization( |
||||
|
{ |
||||
|
key: 'AbpIdentity::UserDeletionConfirmation', |
||||
|
defaultValue: 'Default Value', |
||||
|
}, |
||||
|
'John', |
||||
|
), |
||||
|
); |
||||
|
``` |
||||
|
|
||||
|
本地化资源存储在 `ConfigState` 的 `localization` 属性中. |
||||
|
|
||||
|
## 另请参阅 |
||||
|
|
||||
|
* [ASP.NET Core中的本地化](../../Localization.md) |
||||
|
|
||||
|
## 下一步是什么? |
||||
|
|
||||
|
* [权限管理](./Permission-Management.md) |
||||
Loading…
Reference in new issue