Gå til innhold

Meny-rutevelger

app-menu-route-picker er en standalone ControlValueAccessor for å velge en registrert ePortal-rute. Komponenten brukes i konfigurasjonsflater der en funksjon, snarvei eller menyinnstilling skal peke til en intern side.


Kilde og import

Del Sti
Komponent ui/ePortal.ui/src/app/shared/menu/menu-route-picker/menu-route-picker.component.ts
Registry-service ui/ePortal.ui/src/app/shared/menu/menu-route-registry.service.ts
Modell ui/ePortal.ui/src/app/shared/menu/menu-route.model.ts
import { MenuRoute } from 'src/app/shared/menu/menu-route.model';
import { MenuRoutePickerComponent } from 'src/app/shared/menu/menu-route-picker/menu-route-picker.component';

Feature-tabell

Feature Støtte Konfigurasjon
Reactive forms og ngModel Ja ControlValueAccessor
Søkbar route-liste Ja Innebygd ng-select
Modulfiltrering Ja modules, restrictToModuleId
Admin-ruter Opt-in showAdmin
Tom verdi Opt-in default på clearable
Full route-payload Ja selectionChange

Brukseksempel

TypeScript:

shortcutForm = this.fb.group({
  titleKey: ['Dashboard.Shortcuts.CustomerList'],
  route: ['', Validators.required],
});

availableModules = [
  { moduleID: 10, moduleName: this.translate.instant('Modules.Crm') },
  { moduleID: 20, moduleName: this.translate.instant('Modules.Project') },
];

selectedRoute: MenuRoute | null = null;

onRouteSelected(route: MenuRoute | null): void {
  this.selectedRoute = route;
}

HTML:

<app-menu-route-picker
  formControlName="route"
  [modules]="availableModules"
  [restrictToModuleId]="selectedModuleId"
  [showAdmin]="canConfigureAdminRoutes"
  [placeholder]="'Settings.RoutePicker.Placeholder' | translate"
  [clearable]="true"
  (selectionChange)="onRouteSelected($event)">
</app-menu-route-picker>

API

Type Navn Default Beskrivelse
Input modules [] Moduler som brukes til gruppering/filtrering.
Input restrictToModuleId null Begrenser valg til én modul.
Input showAdmin false Inkluderer admin-ruter.
Input disabled false Deaktiverer kontrollen.
Input placeholder '' Placeholder. Bruk i18n i parent.
Input clearable true Tillater å nullstille valgt rute.
Output selectionChange Emitter valgt MenuRoute eller null.

Verdien i formkontrollen er route path som string. selectionChange brukes når parent trenger hele route-objektet.


Kjente fallgruver

Fallgruve Riktig mønster
Forvente at formverdien er MenuRoute Formverdien er path string; bruk selectionChange for objektet.
Vise admin-ruter for vanlige brukere Bind showAdmin til faktisk tilgang.
Hardkode modulnavn Bruk oversatte modulnavn eller eksisterende moduldata.
Bruke komponenten for eksterne URL-er Den er for interne menyregistrerte ruter.

Relaterte sider