mirror of https://github.com/abpframework/abp.git
committed by
GitHub
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