Aggiunta di un valore al router Aurelia config.title

Question

Desidero impostare un valore del titolo di base per la mia applicazione Aurelia e quindi aggiungere un valore ad esso in base al percorso attivo.

La mia configurazione del router è:

export class App { 
    configureRouter(config, router) { 
     config.title = 'Brandon Taylor | Web Developer | Graphic Designer'; 
     config.map([ 
      . . . 
      { route: 'work', name: 'work', moduleId: 'work', nav: true, title: ' | work' }, 
      . . . 
     ]); 

     this.router = router; 
    } 
} 

Aurelia vuole aggiungere il parametro title navigazione al inizio del config.title, ma vorrei che alla fine .

Ho provato a fare un override del modello di vista:

export class Work { 
    activate(params, routeConfig, navigationInstruction) { 
     routeConfig.navModel.router.title += ' | work'; 
    }; 
} 

ma questo si traduce in:

Brandon Taylor | Web Developer | Graphic Designer | work | work | work ... 

su ogni richiesta di routing. Che cosa sto facendo di sbagliato? o come posso aggiungere l'attributo route title allo fine del config.title anziché all'inizio?

Answer 1

Grazie per avermi nella giusta direzione @Jeremy Danyow .

Quello che ho finito con era:

import {NavigationContext} from 'aurelia-router'; 

NavigationContext.prototype.standardBuildTitle = NavigationContext.prototype.buildTitle; 

function buildTitle(separator=' | ') { 
    var titleValues = this.standardBuildTitle(separator).split(separator), 
     routeTitle = titleValues[0], 
     configTitle = titleValues.slice(1); 
    configTitle.push(routeTitle); 
    return configTitle.join(separator); 
} 

NavigationContext.prototype.buildTitle = buildTitle; 

Il motivo è che, data:

config.title = 'Brandon Taylor | Web Developer | Graphic Designer' 

e chiamando:

return standardTitle.split(separator).reverse().join(separator); 

risultati in:

Graphic Designer | Web Developer | Brandon Taylor | about 

invece di:

Brandon Taylor | Web Developer | Graphic Designer | about 

Answer 2

So che il codice sopra è una soluzione ~ sporca, ma forse può aiutarti fino a quando non ottieni un bel modo per ottenere ciò che vuoi dal supporto di Aurelia.

non si potrebbe fare: la logica titolo standard

export class App { 
    configureRouter(config, router) { 
     const title = 'Brandon Taylor | Web Developer | Graphic Designer'; 
     config.title = ''; 
     var configMap = [ 
      . . . 
      { route: 'work', name: 'work', moduleId: 'work', nav: true, title: ' | work' }, 
      . . . 
     ]; 
     configMap.forEach(item => item.title = title + item.title); 

     config.map(configMap);  
     this.router = router; 
    } 
} 

Answer 3

di Aurelia antepone il titolo rotta per titolo il percorso esterno/router. Ad esempio, nell'app di navigazione skeleton, il titolo del router dell'applicazione è Aurelia. Il titolo del percorso degli utenti github è preposto al titolo del router che produce Github Users | Aurelia. Se si dovesse passare alla pagina del router figlio, il titolo si aggiorna su Welcome | Child Router | Aurelia.

Se ho capito bene la domanda, ti piacerebbe che questa logica fosse invertita. Il risultato desiderato in questo esempio sarebbe Aurelia | Child Router | Welcome.

La logica di creazione del titolo si trova nel metodo della classe buildTitle.

È possibile ignorare questo metodo aggiungendo quanto segue al tuo main.js:

// import the NavigationContext class. It contains the method that 
// builds the title. 
import {NavigationContext} from 'aurelia-router'; 

// rename the standard "buildTitle" method. 
NavigationContext.prototype.standardBuildTitle = NavigationContext.prototype.buildTitle; 

// replace the standard "buildTitle" method with a version that 
// reverses the order of the title parts. 
function buildTitle(separator = ' | ') { 
    let standardTitle = this.standardBuildTitle(separator); 
    return standardTitle.split(separator).reverse().join(separator); 
} 
NavigationContext.prototype.buildTitle = buildTitle; 

Il risultato finale assomiglia a questo: