mirror of https://github.com/abpframework/abp.git
liangshiwei
5 years ago
12 changed files with 380 additions and 401 deletions
@ -1,37 +0,0 @@ |
|||
# Custom Setting Page |
|||
|
|||
There are several settings tabs from different modules. You can add a custom setting page to your project. |
|||
|
|||
1. Create a component with the following command: |
|||
|
|||
```bash |
|||
yarn ng generate component my-settings |
|||
``` |
|||
|
|||
2. Open the `app.component.ts` and modify the file as shown below: |
|||
|
|||
```js |
|||
import { Component } from '@angular/core'; |
|||
import { SettingTabsService } from '@abp/ng.core'; // imported SettingTabsService |
|||
import { MySettingsComponent } from './my-settings/my-settings.component'; // imported MySettingsComponent |
|||
|
|||
@Component(/* component metadata */) |
|||
export class AppComponent { |
|||
constructor(private settingTabs: SettingTabsService) // injected MySettingsComponent |
|||
{ |
|||
// added below |
|||
settingTabs.add([ |
|||
{ |
|||
name: 'MySettings', |
|||
order: 1, |
|||
requiredPolicy: 'policy key here', |
|||
component: MySettingsComponent, |
|||
}, |
|||
]); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
Navigate to `/setting-management` route to see the changes: |
|||
|
|||
 |
|||
@ -1,82 +0,0 @@ |
|||
# Custom Setting Page |
|||
|
|||
There are several settings tabs from different modules. You can add a custom setting page to your project. |
|||
|
|||
### Create a setting View Component |
|||
|
|||
Create `MySettingGroup` folder under the `Components` folder. Add a new view component. Name it as `MySettingGroupViewComponent`: |
|||
|
|||
 |
|||
|
|||
Open the `MySettingGroupViewComponent.cs` and change the whole content as shown below: |
|||
|
|||
```csharp |
|||
public class MySettingGroupViewComponent : AbpViewComponent |
|||
{ |
|||
public virtual IViewComponentResult Invoke() |
|||
{ |
|||
return View("~/Components/MySettingGroup/Default.cshtml"); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
> You can also use the `InvokeAsync` method, In this example, we use the `Invoke` method. |
|||
|
|||
### Default.cshtml |
|||
|
|||
Create a `Default.cshtml` file under the `MySettingGroup` folder. |
|||
|
|||
Open the `Default.cshtml` and change the whole content as shown below: |
|||
|
|||
```html |
|||
<div> |
|||
<p>My setting group page</p> |
|||
</div> |
|||
``` |
|||
|
|||
### BookStoreSettingPageContributor |
|||
|
|||
Create a `BookStoreSettingPageContributor.cs` file under the `Settings` folder: |
|||
|
|||
 |
|||
|
|||
The content of the file is shown below: |
|||
|
|||
```csharp |
|||
public class BookStoreSettingPageContributor : ISettingPageContributor |
|||
{ |
|||
public Task ConfigureAsync(SettingPageCreationContext context) |
|||
{ |
|||
context.Groups.Add( |
|||
new SettingPageGroup( |
|||
"Volo.Abp.MySettingGroup", |
|||
"MySettingGroup", |
|||
typeof(MySettingGroupViewComponent) |
|||
) |
|||
); |
|||
|
|||
return Task.CompletedTask; |
|||
} |
|||
|
|||
public Task<bool> CheckPermissionsAsync(SettingPageCreationContext context) |
|||
{ |
|||
// You can check the permissions here |
|||
return Task.FromResult(true); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
Open the `BookStoreWebModule.cs` file and add the following code: |
|||
|
|||
```csharp |
|||
Configure<SettingManagementPageOptions>(options => |
|||
{ |
|||
options.Contributors.Add(new BookStoreSettingPageContributor()); |
|||
}); |
|||
``` |
|||
|
|||
### Run the Application |
|||
|
|||
Navigate to `/SettingManagement` route to see the changes: |
|||
|
|||
 |
|||
@ -1,64 +0,0 @@ |
|||
# Custom Setting Page |
|||
|
|||
There are several settings tabs from different modules. You can add a custom setting page to your project. |
|||
|
|||
### Create a Razor Component |
|||
|
|||
Create `MySettingGroup` folder under the `Pages` folder. Add a new razor component. Name it as `MySettingGroupComponent`: |
|||
|
|||
 |
|||
|
|||
Open the `MySettingGroupComponent.razor` and change the whole content as shown below: |
|||
|
|||
```csharp |
|||
<Row> |
|||
<p>my setting group</p> |
|||
</Row> |
|||
``` |
|||
|
|||
### BookStoreSettingComponentContributor |
|||
|
|||
Create a `BookStoreSettingComponentContributor.cs` file under the `Settings` folder: |
|||
|
|||
 |
|||
|
|||
The content of the file is shown below: |
|||
|
|||
```csharp |
|||
public class BookStoreSettingComponentContributor : ISettingComponentContributor |
|||
{ |
|||
public Task ConfigureAsync(SettingComponentCreationContext context) |
|||
{ |
|||
context.Groups.Add( |
|||
new SettingComponentGroup( |
|||
"Volo.Abp.MySettingGroup", |
|||
"MySettingGroup", |
|||
typeof(MySettingGroupComponent) |
|||
) |
|||
); |
|||
|
|||
return Task.CompletedTask; |
|||
} |
|||
|
|||
public Task<bool> CheckPermissionsAsync(SettingComponentCreationContext context) |
|||
{ |
|||
// You can check the permissions here |
|||
return Task.FromResult(true); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
Open the `BookStoreBlazorModule.cs` file and add the following code: |
|||
|
|||
```csharp |
|||
Configure<SettingManagementComponentOptions>(options => |
|||
{ |
|||
options.Contributors.Add(new BookStoreSettingComponentContributor()); |
|||
}); |
|||
``` |
|||
|
|||
### Run the Application |
|||
|
|||
Navigate to `/setting-management` route to see the changes: |
|||
|
|||
 |
|||
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
@ -1,41 +0,0 @@ |
|||
# 自定义设置页面 |
|||
|
|||
不同的模块提供它们的设置选项卡. 你可以通过3个步骤在项目中自定义设置页面. |
|||
|
|||
1. 使用以下命令创建一个组件 |
|||
|
|||
```bash |
|||
yarn ng generate component my-settings |
|||
``` |
|||
|
|||
2. 打开 `app.component.ts` 做以下修改: |
|||
|
|||
```js |
|||
import { Component } from '@angular/core'; |
|||
import { SettingTabsService } from '@abp/ng.core'; // imported SettingTabsService |
|||
import { MySettingsComponent } from './my-settings/my-settings.component'; // imported MySettingsComponent |
|||
|
|||
@Component(/* component metadata */) |
|||
export class AppComponent { |
|||
constructor(private settingTabs: SettingTabsService) // injected MySettingsComponent |
|||
{ |
|||
// added below |
|||
settingTabs.add([ |
|||
{ |
|||
name: 'MySettings', |
|||
order: 1, |
|||
requiredPolicy: 'policy key here', |
|||
component: MySettingsComponent, |
|||
}, |
|||
]); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
导航到 `/setting-management` 路由你会看到以下变化: |
|||
|
|||
 |
|||
|
|||
## 下一步是什么? |
|||
|
|||
- [懒加载 Scripts 与 Styles](./Lazy-Load-Service.md) |
|||
@ -1,82 +0,0 @@ |
|||
# 自定义设置页面 |
|||
|
|||
一些模块内置了设置页面,你也可以在项目中添加自己的设置页面. |
|||
|
|||
### 创建视图组件 |
|||
|
|||
在 `Components` 目录下创建 `MySettingGroup` 文件夹, 添加一个名为 `MySettingGroupViewComponent` 的视图组件: |
|||
|
|||
 |
|||
|
|||
打开 `MySettingGroupViewComponent.cs` 替换为以下内容: |
|||
|
|||
```csharp |
|||
public class MySettingGroupViewComponent : AbpViewComponent |
|||
{ |
|||
public virtual IViewComponentResult Invoke() |
|||
{ |
|||
return View("~/Components/MySettingGroup/Default.cshtml"); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
> 你还可以使用 `InvokeAsync` 方法,在这个示例中我们使用 `Invoke` 方法. |
|||
|
|||
### Default.cshtml |
|||
|
|||
在 `MySettingGroup` 目录下创建 `Default.cshtml` 文件. |
|||
|
|||
打开 `Default.cshtml` 替换为以下内容: |
|||
|
|||
```html |
|||
<div> |
|||
<p>My setting group page</p> |
|||
</div> |
|||
``` |
|||
|
|||
### BookStoreSettingPageContributor |
|||
|
|||
在 `Settings` 目录下创建 `BookStoreSettingPageContributor.cs` 文件. |
|||
|
|||
 |
|||
|
|||
文件内容如下: |
|||
|
|||
```csharp |
|||
public class BookStoreSettingPageContributor : ISettingPageContributor |
|||
{ |
|||
public Task ConfigureAsync(SettingPageCreationContext context) |
|||
{ |
|||
context.Groups.Add( |
|||
new SettingPageGroup( |
|||
"Volo.Abp.MySettingGroup", |
|||
"MySettingGroup", |
|||
typeof(MySettingGroupViewComponent) |
|||
) |
|||
); |
|||
|
|||
return Task.CompletedTask; |
|||
} |
|||
|
|||
public Task<bool> CheckPermissionsAsync(SettingPageCreationContext context) |
|||
{ |
|||
// You can check the permissions here |
|||
return Task.FromResult(true); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
打开 `BookStoreWebModule.cs` 文件添加以下代码: |
|||
|
|||
```csharp |
|||
Configure<SettingManagementPageOptions>(options => |
|||
{ |
|||
options.Contributors.Add(new BookStoreSettingPageContributor()); |
|||
}); |
|||
``` |
|||
|
|||
### 运行应用程序 |
|||
|
|||
导航到 `/SettingManagement` 路由查看更改: |
|||
|
|||
 |
|||
@ -1,64 +0,0 @@ |
|||
# 自定义设置页面 |
|||
|
|||
一些模块内置了设置页面,你也可以在项目中添加自己的设置页面. |
|||
|
|||
### 创建 Razor 组件 |
|||
|
|||
在 `Pages` 目录下创建 `MySettingGroup` 文件夹, 添加一个名为 `MySettingGroupComponent` 的Razor组件: |
|||
|
|||
 |
|||
|
|||
打开 `MySettingGroupComponent.razor` 替换为以下内容: |
|||
|
|||
```csharp |
|||
<Row> |
|||
<p>my setting group</p> |
|||
</Row> |
|||
``` |
|||
|
|||
### BookStoreSettingComponentContributor |
|||
|
|||
在 `Settings` 目录下创建 `BookStoreSettingComponentContributor.cs` 文件. |
|||
|
|||
 |
|||
|
|||
文件内容如下: |
|||
|
|||
```csharp |
|||
public class BookStoreSettingComponentContributor : ISettingComponentContributor |
|||
{ |
|||
public Task ConfigureAsync(SettingComponentCreationContext context) |
|||
{ |
|||
context.Groups.Add( |
|||
new SettingComponentGroup( |
|||
"Volo.Abp.MySettingGroup", |
|||
"MySettingGroup", |
|||
typeof(MySettingGroupComponent) |
|||
) |
|||
); |
|||
|
|||
return Task.CompletedTask; |
|||
} |
|||
|
|||
public Task<bool> CheckPermissionsAsync(SettingComponentCreationContext context) |
|||
{ |
|||
// You can check the permissions here |
|||
return Task.FromResult(true); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
打开 `BookStoreBlazorModule.cs` 文件添加以下代码: |
|||
|
|||
```csharp |
|||
Configure<SettingManagementComponentOptions>(options => |
|||
{ |
|||
options.Contributors.Add(new BookStoreSettingComponentContributor()); |
|||
}); |
|||
``` |
|||
|
|||
### 运行应用程序 |
|||
|
|||
导航到 `/setting-management` 路由查看更改: |
|||
|
|||
 |
|||
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
Loading…
Reference in new issue