mirror of https://github.com/abpframework/abp.git
liangshiwei
6 years ago
4 changed files with 212 additions and 9 deletions
@ -1,3 +1,130 @@ |
|||
# Dom插入(Scripts与Styles) |
|||
|
|||
TODO... |
|||
你可以使用@abp/ng.core包提供的 `DomInsertionService` 以简单的方式的插入脚本与样式. |
|||
|
|||
## 入门 |
|||
|
|||
你不必在模块或组件级别提供 `DomInsertionService` ,因为它已经在**根中**提供. 你可以在组件,指令或服务中直接注入并使用它. |
|||
|
|||
```js |
|||
import { DomInsertionService } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private domInsertionService: DomInsertionService) {} |
|||
} |
|||
``` |
|||
|
|||
## 用法 |
|||
|
|||
你可以使用 `DomInsertionService` 提供的 `insertContent` 方法去创建一个 `<script>` 或 `<style>` 元素到DOM的指定位置. 还有 `projectContent` 方法用于渲染组件和模板. |
|||
|
|||
### 如何插入Scripts |
|||
|
|||
`insertContent` 方法的第一个参数需要一个 `ContentStrategy`. 如果传递 `ScriptContentStrategy` 实例, `DomInsertionService` 将创建具有给定内容的 `<script>` 元素并放置在指定的DOM位置. |
|||
|
|||
```js |
|||
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private domInsertionService: DomInsertionService) {} |
|||
|
|||
ngOnInit() { |
|||
const scriptElement = this.domInsertionService.insertContent( |
|||
CONTENT_STRATEGY.AppendScriptToBody('alert()') |
|||
); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
在上面的示例中,将 `<script>alert()</script>` 元素放置在 `<body>`的末尾, `scriptElement` 类型是一个 `HTMLScriptElement`. |
|||
|
|||
请参考[ContentStrategy](./Content-Strategy.md)查看所有可用的内容策略以及如何构建自己的内容策略. |
|||
|
|||
> 重要说明: `DomInsertionService` 不会两次插入相同的内容. 为了再次添加内容你首先应该使用 `removeContent` 方法删除旧内容. |
|||
|
|||
### 如何插入Styles |
|||
|
|||
`insertContent` 方法的第一个参数需要一个 `ContentStrategy`. 如果传递 `StyleContentStrategy` 实例, `DomInsertionService` 将创建具有给定内容的 `<style>` 元素并放置在指定的DOM位置. |
|||
|
|||
```js |
|||
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private domInsertionService: DomInsertionService) {} |
|||
|
|||
ngOnInit() { |
|||
const styleElement = this.domInsertionService.insertContent( |
|||
CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}') |
|||
); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
在上面的示例中,将 `<style>body {margin: 0;}</style>` 元素放置在 `<head>`的末尾, `styleElement` 类型是一个 `HTMLStyleElement`. |
|||
|
|||
请参考[ContentStrategy](./Content-Strategy.md)查看所有可用的内容策略以及如何构建自己的内容策略. |
|||
. |
|||
> 重要说明: `DomInsertionService` 不会两次插入相同的内容. 为了再次添加内容你首先应该使用 `removeContent` 方法删除旧内容. |
|||
|
|||
### 如何删除已插入的 Scripts & Styles |
|||
|
|||
如果你传递 `HTMLScriptElement` 或 `HTMLStyleElement` 做为 `removeContent` 方法的第一个参数, `DomInsertionService` 将删除给定的元素. |
|||
|
|||
```js |
|||
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
private styleElement: HTMLStyleElement; |
|||
|
|||
constructor(private domInsertionService: DomInsertionService) {} |
|||
|
|||
ngOnInit() { |
|||
this.styleElement = this.domInsertionService.insertContent( |
|||
CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}') |
|||
); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
this.domInsertionService.removeContent(this.styleElement); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
在上面的示例中,销毁组件时,将从 `<head>` 中删除 `<style>body {margin: 0;}</style>` 元素. |
|||
|
|||
## API |
|||
|
|||
### insertContent |
|||
|
|||
```js |
|||
insertContent<T extends HTMLScriptElement | HTMLStyleElement>( |
|||
contentStrategy: ContentStrategy<T>, |
|||
): T |
|||
``` |
|||
|
|||
- `contentStrategy` 是方法的重要参数,已经在上方进行说明. |
|||
- 根据给定的策略返回 `HTMLScriptElement` 或 `HTMLStyleElement`. |
|||
|
|||
### removeContent |
|||
|
|||
```js |
|||
removeContent(element: HTMLScriptElement | HTMLStyleElement): void |
|||
``` |
|||
|
|||
- `element` 参数是已插入的 `HTMLScriptElement` 或 `HTMLStyleElement` 元素,它们应由 `insertContent` 方法返回. |
|||
|
|||
## 下一步是什么? |
|||
|
|||
- [ContentProjectionService](./Content-Projection-Service.md) |
|||
@ -1,3 +1,79 @@ |
|||
# Permission Management |
|||
# 权限管理 |
|||
|
|||
TODO... |
|||
权限是为特定用户,角色或客户端授予或禁止的简单策略. 你可以在[ABP授权文档](../../Authorization.md)中阅读更多信息. |
|||
|
|||
您可以使用 `ConfigState` 的 `getGrantedPolicy` 选择器获取经过身份验证的用户的权限. |
|||
|
|||
你可以从Store中获取权限的布尔值: |
|||
|
|||
```js |
|||
import { Store } from '@ngxs/store'; |
|||
import { ConfigState } from '../states'; |
|||
|
|||
export class YourComponent { |
|||
constructor(private store: Store) {} |
|||
|
|||
ngOnInit(): void { |
|||
const canCreate = this.store.selectSnapshot(ConfigState.getGrantedPolicy('AbpIdentity.Roles.Create')); |
|||
} |
|||
|
|||
// ... |
|||
} |
|||
``` |
|||
|
|||
或者你可以通过 `ConfigStateService` 获取它: |
|||
|
|||
```js |
|||
import { ConfigStateService } from '../services/config-state.service'; |
|||
|
|||
export class YourComponent { |
|||
constructor(private configStateService: ConfigStateService) {} |
|||
|
|||
ngOnInit(): void { |
|||
const canCreate = this.configStateService.getGrantedPolicy('AbpIdentity.Roles.Create'); |
|||
} |
|||
|
|||
// ... |
|||
} |
|||
``` |
|||
|
|||
## 权限指令 |
|||
|
|||
你可以使用 `PermissionDirective` 来根据用户的权限控制DOM元素是否可见. |
|||
|
|||
```html |
|||
<div *abpPermission="AbpIdentity.Roles"> |
|||
仅当用户具有`AbpIdentity.Roles`权限时,此内容才可见. |
|||
</div> |
|||
``` |
|||
|
|||
如上所示,你可以使用 `abpPermission` 结构指令从DOM中删除元素. |
|||
|
|||
该指令也可以用作属性指令,但是我们建议你将其用作结构指令. |
|||
|
|||
## 权限守卫 |
|||
|
|||
如果你想要在导航过程中控制经过身份验证的用户对路由的访问权限,可以使用 `PermissionGuard`. |
|||
|
|||
将 `requiredPolicy` 添加到路由模块中的 `routes`属性. |
|||
|
|||
```js |
|||
const routes: Routes = [ |
|||
{ |
|||
path: 'path', |
|||
component: YourComponent, |
|||
canActivate: [PermissionGuard], |
|||
data: { |
|||
routes: { |
|||
requiredPolicy: 'AbpIdentity.Roles.Create', |
|||
}, |
|||
}, |
|||
}, |
|||
]; |
|||
``` |
|||
|
|||
授予的策略存储在 `ConfigState` 的 `auth` 属性中. |
|||
|
|||
## 下一步是什么? |
|||
|
|||
* [Config State](./Config-State.md) |
|||
Loading…
Reference in new issue