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

Aurelia 想要将 title 导航参数附加到 config.title 的 beginning，但我希望它位于结束.

我试过在视图模型中进行覆盖：

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

但这会导致：

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

在每个路由请求上。我究竟做错了什么？或者如何将路由 title 属性附加到 config.title 的 end 而不是开头？

Answer 1

我知道上面的代码是一个 ~dirty~ 解决方法，但也许可以帮助你，直到你找到一个漂亮的方式从 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 2

Aurelia 的标准标题逻辑将路由标题添加到外部 route/router 的标题之前。例如，在 skeleton-navigation 应用程序中，应用程序路由器的标题是 Aurelia。 github 用户路由的标题被添加到生成 Github Users | Aurelia 的路由器标题之前。如果您导航到 child 路由器页面，标题将更新为 Welcome | Child Router | Aurelia。

如果我理解正确的话，你会希望这个逻辑颠倒过来。此示例中的预期结果为 Aurelia | Child Router | Welcome.

标题构建逻辑位于NavigationContextclass的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 3

感谢@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

将值附加到 Aurelia 路由器 config.title

Appending a value to the Aurelia router config.title

javascript

aurelia