Aurelia: Wie navigiere ich zwischen untergeordneten Routen?

Question

Ich versuche, von einer untergeordneten Route zur nächsten zu navigieren, aber ich bekomme ständig Route not found. Meine primäre Frage: Wie navigiere ich zwischen untergeordneten Ansichten?

Unten ist der Code, und ich werde auch weitere Fragen haben.

App Mode-View App Klasse:

export class App { 
    configureRouter(config, router) { 
    config.title = 'My Site'; 

    config.map([ 
     { route: ['','job-view'], name: 'jobView', moduleId: './job-view', nav: true, title:'Jobs'}, 
     { route: ['services'], name: 'services', moduleId: './services', nav: true, title:'Services'} 
    ]); 

    this.router = router; 
    this.router.refreshNavigation(); 
    } 
} 

Q.2: Warum brauchen wir router hier zu sparen, wenn es von aurelia-router immer zugänglich ist?

App Seite:

<template> 
    <require from='./nav-bar'></require> 
    <nav-bar router.bind="router"></nav-bar> 
    <div class="container"> 
     <router-view></router-view> 
    </div> 
</template> 

Ok, also jetzt, dass wir unsere Stammseite Ansicht und nav definiert haben, lassen Sie uns die job-view MV definieren.

Jobview Klasse:

export class JobView { 
    configureRouter(config, router) { 
    config.map([ 
     { route: ['','jobs'], name: 'jobs', moduleId: './jobs', nav: false, title:'Jobs', settings:{icon:'glyphicon glyphicon-align-justify'} }, 
     { route: ['job/:id'], name: 'job', moduleId: './job', nav: false, title:'Job Details'} 
    ]); 

    this.router = router; //WHY SAVE THIS? 
    this.router.refreshNavigation(); 
    } 
} 

Jobview Seite:

<template> 

    <router-view></router-view> 

</template> 

Nun, hier ist der Kinderblick. Meine Annahme, dass das Routing, das auftritt, sollte relativ zu job-view sein. Das ist, was ich will, im Idealfall.

Jobs Klasse(eine Reihe von Code aus Gründen der Kürze entfernt):

import {Router} from 'aurelia-router'; 

    @inject(Router) 
    export class Jobs { 

    constructor(router) { 
     this.router = router; 
    } 

    toJob(id) { 
     // this.router.navigateToRoute("job", {id:id}); // ERROR - ROUTE NOT FOUND 
     this.router.navigate("#/job-view/job/".concat(id)); // THIS WORKS 
    } 
} 

Q.3: Ich habe beide gesehen router.navigateToRoute und router.navigate verwiesen, aber keine Anzeige, wenn entweder verwenden oder was ist der Unterschied, und das Dokument nicht zu erklären. Welches sollte verwendet werden? Docs

Jobs Seite: zum jobs.html sind irrelevant, so sie hier nicht aufgeführt sind.

Schließlich ist die job Ansicht:

Jobklasse: Nichts relevant für job.js, also nicht Codeliste. Am besten kann ich die Navigation zurück zu jobs durchführen, aber das wird unten auf der Seite behandelt.

Job Seite:

<!-- a bunch of html //--> 
<!-- HOW TO USE ROUTER IN HTML, NOT BELOW URL HREF? //--> 
<a href="#/jobs">Print Jobs</a> 
<!-- a bunch of html //--> 

Q.4: Auch hier würde ich auf eine relative Routing wie auch in der HTML-Seite. Das obige funktioniert nicht, also was soll ich verwenden?

Es gab eine proposed answer in einer ähnlichen Frage, aber job-view in job und unter Verwendung job-view gespeicherte Router funktioniert auch nicht.

Übrigens, wenn ich manuell zu http://localhost:3000/#/job-view/job/3 navigiere die Seite lädt gut, so ist es etwas mit dem Router klar.

Hinweis zum Mod: Eine ähnliche Frage wurde bei How to access child router in Aurelia? gestellt, aber es wurde nicht mit einer Lösung beantwortet, die funktioniert.

Answer 1

So wie ich das Kind Router in meiner Aurelia apps so konfiguriert haben, in dieser Art und Weise ist:

app.js 

export class App { 
    configureRouter(config, router) { 
     config.map([ 
      { route: ['','home'], name: 'home', moduleId: 'home', nav: true }, 
      { route: 'work', name: 'work', moduleId: 'work/work-section', nav: true }, 
     ]); 
     this.router = router; 
    } 
} 


work/work-section.js 

export class WorkSection { 

    configureRouter(config, router) { 
     config.map([ 
      { route: '', moduleId: './work-list', nav: false }, 
      { route: ':slug', name: 'workDetail', moduleId: './work-detail', nav: false } 
     ]); 
     this.router = router; 
    }; 

} 

Die entsprechende "Work-section.html" ist einfach ein Router Ausblick:

<template> 
    <router-view></router-view> 
</template> 

In diesem Anwendungsfall habe ich meine Hauptapp.js, die einen untergeordneten Router "work" definiert, der in einem Unterverzeichnis unter src sitzt. das Kind Router, "work-Bereich" übernimmt, die Aktivierung der "Arbeitsliste" Route, da die Pfadsegmente Ende

Wenn die Route /work aktiviert,: /work

„work-list.js "ruft Elemente von einer REST-API ab und übergibt die Daten dann an die Ansicht. Von dort, ich bin in der Lage Route zu nutzen Bindung in dem „Work-list.html“ im Hinblick auf ein „Arbeitskommando“ zu erhalten:

<div repeat.for="sample of item.samples"> 
    <a route-href="route: workDetail; params.bind: { slug: sample.slug }"> 
     ${sample.title} 
    </a> 
</div> 

Hoffnung, die Ihnen heraus hilft. Ich bin mir nicht 100% sicher, ob Sie nach einer Weiterleitung fragen oder wie Sie von der Ansicht aus auf eine Kinderroute navigieren können. Bitte korrigieren Sie mich, wenn ich falsch liege und ich werde mein Bestes geben, um meine Antwort zu aktualisieren für dich.

Answer 2

Ich werde versuchen, Ihre Fragen eins nach dem anderen unten zu beantworten.

Ich werde von Q2 beginnen

Q.2: Warum brauchen wir Router hier zu sparen, wenn es von aurelia-Router immer zugänglich ist?

Also in Ihrer App Mode-View App Klasse Sie Router Eigentum Ihrer Ansicht verweisen: <nav-bar router.bind="router"></nav-bar>, das ist, warum Sie die Eigenschaft erklären, müssen dann, es zu benutzen. In der zweiten Ansicht sind Sie nicht so, Sie brauchen es nicht :-)

Die Eigenschaft router wird auch hinzugefügt, wenn Sie etwas mit dem Router in main.ts/main.js tun müssen - der Ausgangspunkt Ihrer Anwendung . Dies liegt daran, dass der Router zum ersten Mal dort konfiguriert ist und die Injektion im Konstruktor nicht funktioniert. Sie müssen diese Eigenschaft also speichern, um sie in der Methode configureRouter(..) zu erhalten (Anmerkung: Dies war ein Fall vor der Beta 1, ich weiß es nicht.) wenn es jetzt noch da ist).

In Ihrem Code haben Sie einen Anruf für this.router.refreshNavigation(); Dies wird sicherstellen, dass Ihr Router mit neuen Informationen zum aktuellen Standort des Routing aktualisiert wird.

Q.3: Ich habe sowohl router.navigateToRoute und Router gesehen.navigiert referenziert, aber keine Angabe, wann zu verwenden ist oder was der Unterschied ist, und das Dokument wird nicht erklärt. Welches sollte verwendet werden? Dokumente

Die Methode router.navigate(fragment: string, options?: any) verwendet ein URL-Fragment, nicht ein Routenname, um zu navigieren, z. router.navigate('#/app/child', {...<options - not params od the URL>...}). Diese Methode muss verwendet werden, um absolut zwischen Routern zu navigieren und um die übergeordnete URL usw. zu erreichen.

Wenn Sie nur um den aktuellen Router navigieren, verwenden Sie immer router.navigateToRoute(route: string, params?: any, options?: any). Bei dieser Methode wird ein Routenname verwendet, keine URL, sondern wir fügen einfach einen Namen der Route in die benutzerdefinierte Routing-Map ein (benutzerdefiniert bedeutet die aktuelle untergeordnete Routing-Map oder das aktuelle Hauptrouting bezüglich der URL-Position auf der Seite). Hier können Sie, wie Sie sehen, bequem URL-Parameter übergeben. Sie können ein params-Objekt verwenden, anstatt die URL mit params zu verketten.

Q.4: Auch hier möchte ich relativ zu Relative, auch in der HTML-Seite. Das obige funktioniert nicht, also was soll ich verwenden?

In Aurelia sind wir href Attribut des a Tag direkt für die Navigation nicht verwenden. Wie bereits von Brandon beantwortet, müssen Sie das Attribut route-href verwenden, das wahrscheinlich nirgends dokumentiert ist, sondern nur in Foren und Portalen angezeigt wird. Dies entspricht der router.navigateToRoute(route: string, params?: any, options?: any), so können Sie es nicht zwischen Routern in einem solchen Fall navigieren Sie benutzerdefinierte Attribute verwenden können, oder einfach nur click.triger="navTo('#/app/child')" verwenden, wo die navTo() Methode in der View-Modell implementiert und sieht wie folgt aus:

public navTo(routeName: string) { 
    // Assuming you are injecting router somewhere in the constructor 
    this.router.navigateToRoute(routeName); 
} 

Und schließlich Ihr Thema Frage:

Q.1: Wie

Wahrscheinlich Sie die Antwort wissen jetzt zwischen Kind Routen navigieren, benutzen Sie einfach: router.navigate(fragment: string, options?: any) mit absoluter URL.

Unten Beispiel Brauch, diese zu lösen Attribut:

import {inject} from "aurelia-dependency-injection"; 
import {Router} from "aurelia-router"; 
import {customAttribute} from "aurelia-framework"; 

@customAttribute('nav-href') 
@inject(Element, Router) 
export class NavHref { 
    private value: string = ''; 

    constructor(private element: Element, private router: Router) { 
     let $this = this; 
     element.addEventListener('click',() => { 
      if ($this.value === 'back') { 
       $this.router.navigateBack(); 
      } else { 
       // expression 
       $this.router.navigate($this.value); 
      } 
     }); 
    } 

    public valueChanged(newValue: string, oldValue: string) { 
     this.value = newValue; 
    } 
} 

Zuerst Sie es in Ihrem HTML importieren müssen, nannte ich meine Datei nav.href.ts:

<require from="common/nav.href"></require> 

Dann einfach es verwenden in Sie HTML-Code:

<a nav-href="#/home/any-location">My link to any location</a> 

Hoffnung das wird Ihnen helfen, prost :-)