Navigationsleiste erweitern

Die Navigationsleiste in der Anwendung IBM® Sterling Store Engagement enthält derzeit die Menüoptionen "Globale Suche" und "Warnungen". Sie können die Navigationsleiste erweitern, um weitere Menüoptionen entsprechend Ihren Geschäftsanforderungen anzuzeigen.

Informationen zu diesem Vorgang

Um das Menü für die Navigationsleiste zu entwickeln, müssen Sie das Menü konfigurieren und einen Service für die Implementierung der Menüaktionen erstellen.

Vorgehensweise

Konfigurieren Sie das Navigationsleistenmenü.
Die Schnittstelle INavbarMenusConfig wird durch Menükonfiguration implementiert. Stellen Sie die INavbarMenusConfig -Konfiguration in die Datei store-customization-impl.ts , um die Navigationsleiste zu konfigurieren. Sie können die Serviceklasse in einem gemeinsam genutzten Modul platzieren und in shared-extension.module.tskonfigurieren.
Hinweis: Änderungen in shared-extension.module.ts dürfen nur für das Hinzufügen neuer Komponenten oder Services vorgenommen werden.
Konfigurieren Sie die folgenden Felder, um die Navigationsleiste zu erweitern.
- menuSequenceNumber
  Das Feld menuSequenceNumber gibt die Reihenfolge an, in der die Menüoptionen angezeigt werden. Die Menüoptionen werden in aufsteigender Reihenfolge angezeigt. Es wird empfohlen, eine Folgenummer mit einer Differenz von fünf anzugeben. Sie können sofort einsatzfähige Symbole ohne Überlappungen hinzufügen.
- menuService
  Der menuService -Service implementiert die Aktion, die ausgeführt werden muss, wenn Sie auf das Menü klicken. Sie muss den Typ InjectionToken<INavbarMenu>haben.
- menuTID
  menuTID ist eine eindeutige ID für ein Menü. Sie können sie einem HTML -Tag hinzufügen, um Testfälle zu automatisieren.
- menuTitleBundleKey
  Die menuTitleBundleKey ist ein Paketschlüssel des Texts, der zusammen mit dem Symbol des Menüs angezeigt wird.
- resourceId
  Das Feld resourceId ist eine Ressourcenberechtigung, die geprüft wird, bevor das Menü angezeigt wird.
- menuIconClass
  Das Feld menuIconClass ist der Name der Menüsymbolklasse.
Das folgende Beispiel zeigt, wie Sie die Felder konfigurieren.
```
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'
        }
    ];
}
```

Erstellen Sie einen Service zum Implementieren von Serviceaktionen.

Die Serviceklasse implementiert die Schnittstelle INavbarMenu , die nur über die Funktion handleMenuActionverfügt. Dieser Service implementiert die Aktionen, die ausgeführt werden sollen, wenn Sie auf das Menü klicken. Der Service muss den Typ InjectionToken<INavbarMenu>aufweisen.

Das folgende Beispiel zeigt, wie Sie eine Serviceaktion implementieren können.

@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');

Sie können das Token in Multidimensional wie folgt konfigurieren.

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