mirror of https://github.com/abpframework/abp
parent
48d030c1da
commit
8327894980
@ -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