扩展导航栏

在线编辑

IBM® Sterling Store Engagement 应用程序的导航栏目前有全局搜索和警报菜单选项。您可以根据业务需求扩展导航栏以显示其他菜单选项。

关于此任务

要为导航栏开发菜单，必须配置菜单并创建服务以实现菜单操作。

过程

配置导航栏菜单。
INavbarMenusConfig 接口由菜单配置实现。将 INavbarMenusConfig 配置放在 store-customization-impl.ts 文件中以配置导航栏。您可以将服务类放在共享模块中，并在 shared-extension.module.ts中进行配置。
注: 必须仅对添加新组件或服务进行 shared-extension.module.ts 中的更改。
配置以下字段以扩展导航栏。
- menuSequenceNumber
  menuSequenceNumber 字段指定菜单选项的显示顺序。菜单选项按升序显示。建议您提供具有 5 个差异的序号。您可以添加开箱即用的图标，而不存在任何重叠。
- menuService
  menuService 服务实现您单击菜单时要执行的操作。它的类型必须为 InjectionToken<INavbarMenu>。
- menuTID
  menuTID 是菜单的唯一标识。您可以将其添加到 HTML 标记以自动执行测试用例。
- menuTitleBundleKey
  menuTitleBundleKey 是随菜单图标一起显示的文本的捆绑键。
- resourceId
  resourceId 字段是在显示菜单之前检查的资源许可权。
- menuIconClass
  menuIconClass 字段是菜单图标类的名称。
以下示例显示如何配置字段。
```
export class StoreCustomizationImpl extends StoreCustomizationBase {
    static extensionNavbarMenusConfigList: INavbarMenusConfig[] = [
        {
            menuSequenceNumber: 20,
            menuService: GLOBAL_SEARCH_MENU_SERVICE,
            menuTID: 'NavBarGlobalSearchAction',
            menuIconClass: 'app-icon-alert_16',
            menuTitleBundleKey: 'topNavBar.TITLE_AlertMenu',
            resourceId: 'ISF000001'
        }
    ];
}
```

创建服务以实现服务操作。

服务类实现只有一个函数 handleMenuAction的 INavbarMenu 接口。此服务实现单击菜单时要执行的操作。该服务的类型必须为 InjectionToken<INavbarMenu>。

以下示例显示如何实现服务操作。

@Injectable()
export class GlobalSearchMenuService implements INavbarMenu {


    constructor(private modalService: NgbModal,
        private router: Router,
        private activeRoute: ActivatedRoute
    ) { }


    handleMenuAction(route) {
        console.log('global search menu called');
    }


}
export const GLOBAL_SEARCH_MENU_SERVICE = new InjectionToken<INavbarMenu>('GlobalSearchMenuService');

您可以通过以下方式以多维方式配置令牌。

@NgModule({
  imports: [],
  entryComponents: [],
  declarations: [],
  exports: [],
  providers: [
    {
      provide: GLOBAL_SEARCH_MENU_SERVICE,  // Previously defined token
      useClass: GlobalSearchMenuService,  // The actual service
    }
  ]
})
export class SharedExtensionModule { }