Как получить заголовок текущей конфигурации маршрутизатора Aurelia

Я хочу, чтобы message сохранялся на всех страницах моего приложения и устанавливался после ограниченного просмотра модели и представления. На каждой странице у меня очень простой шаблон.Как получить заголовок текущей конфигурации маршрутизатора Aurelia

<template> 
    <h1>${message}</h1> 
</template>

Код позади пуст для каждой страницы ('Page1', 'Home', 'Page2'). Вот мой app.js

import {inject} from 'aurelia-framework'; 

export class App { 

    configureRouter(config, router) { 
     config.title = 'Pathways'; 

     config.map([ 
       { route: ['','home'], name: 'home', moduleId: 'home', nav: true, title:'Home' }, 
       { route: 'page1', name: 'page1', moduleId: 'page1', nav: true, title:'Page1' } 

     ]); 
     // Create a binding to the router object 
     this.router = router; 
    } 
    attached() { 
     this.message = this.router.currentInstruction.config.title; 
    } 
}

Проблема заключается в том, когда я сначала загрузить приложение. ${message} пусто. Затем, когда я перехожу к странице 1, сообщение становится Home !! Я думал, что, может быть, currentInstruction отстает, поэтому я добавил еще одну страницу. Page2, если хотите, но это не получается, независимо от того, что я делаю после первого мореплавания message всегда Home

Так при инициализации приложения message пустым, а затем, после первой навигации message останется Home для полноты.

Мой вопрос: что такое «Aurelia», чтобы получить название каждой страницы, на которой в данный момент находится пользователь? Я думаю, инъекционные маршрутизатор на каждой странице является дорогостоящим

источник

2016-10-14 christopher clark

Возможный дубликат [Глобальное состояние приложения в Аурелии] (http://stackoverflow.com/questions/31210597/global-application-state-in-aurelia) –

Я вижу два варианта:

Первый и самый простой из них, используя свойство геттер, который прислушивается к router.currentInstruction. Например:

@computedFrom('router.currentInstruction') 
get message() { 
    if (this.router.currentInstruction !== null) 
    return this.router.currentInstruction.config.title; 
}

Запуск Пример https://gist.run/?id=b01abe2859bc2bea1af0f8d21fc2045f

Второй вариант использует EventAggregator. Например:

attached() { 
    this.subscription = this.ea.subscribe('router:navigation:success',() => { 
     this.message = this.router.currentInstruction.config.title; 
    }); 
} 

detached() { 
    this.subscription.dispose(); //remember to always dispose the subscription 
}

Запуск примера https://gist.run/?id=7d30d4e8d479cc209ca9013e10e91505

Они говорят, что мы должны стараться избегать EventAggregator. Итак, я бы выбрал первый вариант.

источник

2016-10-14 16:28:19

Первый из них был красивым и элегантным. Он отлично работал. К сожалению, Visual Studio бросила синтаксические ошибки повсюду, я привык бросать эти строки в конце моих js-файлов. Но является ли их альтернативным синтаксисом, который будет более дружественным к Visual Studio? –

Проблема в том, что Visual Studio не готова к синтаксису ES6/7. Вы должны использовать код Visual Studio с плагином Aurelia, который работает намного лучше. Если этот ответ решит вашу проблему, отметьте его как правильный ответ, чтобы помочь другим людям в будущем. –

Вы можете использовать router.currentInstruction.config.title прямой на вашей app.html странице и он будет обновляться каждый раз, то маршрутизатор название меняется (он использует one-way binding):

<h1>title: ${router.currentInstruction.config.title}</h1>

Лучший способ (спасибо комментарии): ${router.currentInstruction.config.navModel.title}

источник

2016-10-15 08:58:23 JayDi

Лучше использовать '$ {router.currentInstruction.config.navModel.title}', потому что config.title не обновляется, когда Вызывается 'routeConfig.navModel.setTitle()'. –

Перейти с выше^---- '$ {router.currentInstruction.config.navModel.title}' –

Как получить заголовок текущей конфигурации маршрутизатора Aurelia

ответ

Смежные вопросы