将值附加到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;
    }
}

奥里利亚希望将追加title导航参数来开始的config.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

Aurelia的标准标题逻辑将路由标题添加到外部路由/路由器的标题之前.例如,在骨架导航应用程序中,应用程序路由器的标题是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;

最终结果如下:

Answer 2

感谢您为我指明了正确的方向@Jeremy Danyow。

我最终得到的是：

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'

并致电：

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

结果是：

Graphic Designer | Web Developer | Brandon Taylor | about

代替：

Brandon Taylor | Web Developer | Graphic Designer | about