mirror of https://github.com/abpframework/abp
liangshiwei
4 years ago
parent
222afaf6c7
commit
0cafd49e3c
@ -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