如何在自定义模板中显示ABP Commercial的‘关联账户’模态框？

核心思路 #

ABP Commercial的「关联账户」模态框是通过内置服务IdentityLinkedAccountsModalService控制显示的，无需依赖原有菜单路由，直接在自定义菜单的点击事件中调用该服务即可。

具体实现步骤 #

1. 导入依赖服务
   在你的自定义组件中，导入ABP Identity模块提供的模态框服务：

import { IdentityLinkedAccountsModalService } from '@abp/ng.identity';

constructor(private linkedAccountsModalService: IdentityLinkedAccountsModalService) {}

2. 绑定菜单点击事件
   在自定义菜单的模板代码中，给菜单元素添加点击事件：

<!-- 示例自定义菜单元素 -->
<div class="custom-menu-item" (click)="openLinkedAccountsModal()">关联账户</div>

3. 实现模态框打开方法
   在组件类中编写方法，调用服务触发模态框显示：

openLinkedAccountsModal(): void {
  this.linkedAccountsModalService.open();
}

4. 确保模块依赖正确
   在你的功能模块中，导入Identity模块以保证服务能正常注入：

import { IdentityModule } from '@abp/ng.identity';

@NgModule({
  imports: [
    // 其他必要模块
    IdentityModule
  ]
})
export class YourCustomFeatureModule {}

注意事项 #

• 确认项目已正确安装并引入ABP Identity模块的依赖包
• 如果自定义模板样式与ABP模态框冲突，可通过覆盖ABP的模态框CSS类做适配

内容的提问来源于stack exchange，提问作者Jalaleddin Hosseini