Routen einer Kindkomponente in Aurelia

Question

Ich bin kein Aurelia Meister und viel mehr Anfänger. Bisher habe ich keine Lösung für mein Problem, aber ich denke, es muss eine einfache Möglichkeit, hoffentlich gibt es folgende Möglichkeiten:

Ich habe eine sehr einfache Struktur mit den app.js und einigen Komponenten (zB admin.js. ..). Da ich eine Navigation für die Routen aller Komponenten haben möchte, muss ich diese Routen in meine app.js bekommen. Einfache oder dumme Frage: Wie erreiche ich das? Ich habe versucht, einfach die Komponenten zu injizieren, aber ich habe keinen Zugang zum Router-Attribut, egal was ich tue.

Beispiel Admin-Komponente Router:

configureRouter(config, router) { 
    config.map([ 
     { route: '', name: 'default', moduleId: 'components/admin/default/default' }, 
     { route: 'roles', name: 'roles', moduleId: 'components/admin/roles/roles', title: 'Rollenverwaltung' }, 
     { route: 'users', name: 'users', moduleId: 'components/admin/users/users', title: 'Nutzerverwaltung' }, 
     { route: 'employees', name: 'employees', moduleId: 'components/admin/employees/employees', title: 'Mitarbeiterverwaltung' } 
    ]); 

    this.router = router; 
} 

Was ich in meiner app Komponente versucht

static inject() { return [AuthService, Admin]; } 

constructor(authService, admin) { 
    this.auth = authService; 

    this.adminRouter = admin; 
} 

ich weiß, dass, so lange ich nicht die Komponente geladen wurde, würde der Router des Admin sein trotzdem leer. Aber selbst wenn die Komponente geladen ist, ist das Router-Objekt nicht definiert.

A not running Gist besser zeigen, was ich (hoffentlich)

Vielleicht basicly bin immer falsch hier etwas, was ich will und nicht verstehen, die Art und Weise aurelia oder sogar js funktioniert?

Vielen Dank für Ihre Hilfe.

Answer 1

Sie können nicht auf den Router zugreifen, wenn die Komponente Admin nicht selbst erstellt wurde, und selbst dann würde das übergeordnete Element die Routen nicht von admin erben.

Wenn Sie wollten Routen rund um Ihre Anwendung definieren und sie dann in einem Ort ziehen vielleicht so etwas wie Ihnen nützlich sein würde -

parent.js

import {Admin} from './admin'; 

export class Parent { 
    static inject = [Admin]; 
    constructor(admin) { 
    this.admin = admin; 
    this.admin.routes.forEach(route => { 
     this.router.addRoute(route); 
    } 
    } 
} 

admin.js

export class Parent { 
    routes = [ 
    { route: '', name: 'default', moduleId: 'components/admin/default/default' }, 
    { route: 'roles', name: 'roles', moduleId: 'components/admin/roles/roles', title: 'Rollenverwaltung' }, 
    { route: 'users', name: 'users', moduleId: 'components/admin/users/users', title: 'Nutzerverwaltung' }, 
    { route: 'employees', name: 'employees', moduleId: 'components/admin/employees/employees', title: 'Mitarbeiterverwaltung' } 
    ]; 
}