Aureliaルータconfig.titleに値を追加する

Question

私のAureliaアプリケーションのベースタイトル値を設定し、アクティブなルートに基づいてその値を追加したいとします。

私のルータの設定は次のとおりです。

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; 
    } 
} 

アウレリアはconfig.titleのを開始からtitleナビゲーションパラメータを追加したいが、私は最後でそれをしたいと思います。

私は、ビューモデルでオーバーライドをやってみました：

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

が、これは、その結果：各ルーティング要求に

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

。私は間違って何をしていますか？またはtitleという属性をの末尾にconfig.titleのに追加するにはどうすればよいですか？

Answer 1

感謝。私がなってしまった何

た：

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; 

与えられたということで理由：

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

と呼び出し：

Graphic Designer | Web Developer | Brandon Taylor | about 

：中

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

結果0

の代わりには：

Brandon Taylor | Web Developer | Graphic Designer | about 

Answer 2

私は、上記のコードが〜ダーティ〜回避策であることを知っていますが、あなたがAureliaのサポートから望むものを得るための美しい方法を得るまで、おそらくあなたを助けることができます。

あなたが行うことができませんでした。

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

アウレリアの標準的なタイトルのロジックは、外側のルート/ルータのタイトルへのルートのタイトルを付加します。たとえば、スケルトン・ナビゲーション・アプリでは、アプリケーション・ルータのタイトルはAureliaです。 githubユーザールートのタイトルはルータタイトルの先頭に追加され、Github Users | Aureliaとなります。子ルータのページに移動する場合、タイトルはWelcome | Child Router | Aureliaに更新されます。

質問を正しく理解していただければ、このロジックを元に戻してください。この例の望ましい結果はAurelia | Child Router | Welcomeです。

タイトルビルディングロジックは、NavigationContextクラスのbuildTitleメソッドにあります。

あなたの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; 

最終的な結果は次のようになります。右方向@Jeremy Danyowに私を指しているため