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

【问题标题】：Appending a value to the Aurelia router config.title将值附加到 Aurelia 路由器 config.title
【发布时间】：2016-10-13 06:56:53
【问题描述】：

我想为我的 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 的开始，但我想在结束。

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

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 而不是开头？

【问题讨论】：

更好的问题是为什么激活被调用了三次。
@AshleyGrant 我应该使用另一个回调吗？我刚刚开始使用 Aurelia。谢谢。
不，您找对地方了。但是，如果一条路线被多次激活，则会出现更大的问题。首先，在您的激活回调中放置一个断点，看看发生了什么以及为什么。
@MatthewJamesDavis 关于为什么activate() 会被多次调用，我在寻找什么？如果我在方法本身内部console.log('activate called');，并导航到路线，导航离开并导航回来，我会看到多个日志语句。
很难说没有一些代码可以看。你问过gitter频道的人吗？ gitter.im/Aurelia/Discuss

标签： javascript aurelia

【解决方案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;

最终结果如下所示：

【讨论】：

非常接近！配置标题的单词顺序颠倒了。看我的回答。
现在在 NavigationInstruction 中，方法是 _buildTitle:github.com/aurelia/router/blob/master/src/…
您确定_buildTitle 是供公众使用的吗？ API 没有提到它。
你可以使用aurelia.io/docs/routing/configuration#internationalizing-titles

【解决方案2】：

我知道上面的代码是一个 ~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;
    }
}

【讨论】：

聪明 :) 这适用于静态标题，但不适用于视图中的动态值。

【解决方案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

【讨论】：