为参数化路由页面的多个实例设置标题

时间:2017-02-10 12:19:51

标签: aurelia aurelia-router

我将路线配置定义为:

{ route: 'page/:id', name: 'page', moduleId: 'page', title: "Page #" }

我还有另一个组件正在监听router:navigation:complete事件(EventAggregator),并且当发现一个不同的片段时,它会将它添加到一个数组并在屏幕上显示(作为一种历史记录)列表)使用NavigationInstruction.config.navModel.title

当我使用不同的ID时间导航到“页面”组件时,例如#/page/1#/page/2#/page/3。我从NavigationInstruction.config.navModel.setTitle("Page " + id)方法拨打activate()

在我的历史中,我最初会看到:

"Page 1"`

...然后导航到#/page/2 ...

"Page 2"
"Page 2"

...然后导航到#/page/3 ...

"Page 3"
"Page 3"
"Page 3"

由于RouteConfig在不同的NavigationInstructions之间共享,因此更改navModel.title值会影响从NavigationInstructions派生的所有RouteConfig

任何人都有任何想法如何为每个页面组件实例设置自定义标题? Aurelia是否希望同时处理同一个组件的多个实例?

我考虑使用新的router.transformTitle挂钩,但由于我最终可能会在标题中包含更多信息,例如"Page 1: Contents""Page 2: The First Chapter",感觉次优,可能会让我做很多滚动自己的架构来动态解析字符串。

2 个答案:

答案 0 :(得分:1)

我创建了一个非常简单的应用来测试它。我确实使用了稍微不同的策略。我在activate viewmodel上使用了page回调,而不是订阅router:navigation:complete事件。 这是我的代码:

export class Page {
  activate(params, route, instruction) {
    this.pageNumber = parseInt( params.id || '1' );
    instruction.config.navModel.setTitle("Page " + this.pageNumber)
  }
}

我没有看到你所看到的行为:

History Screenshot

您使用的是哪个版本的框架模块?

答案 1 :(得分:0)

从查看代码和回复(感谢@Ashley Grant)看来,我对NavigationInstruction的期望并不准确。

NavigationInstruction表示触发,导航,停用以前的网页,激活新网页以及触发作为该过程一部分触发的任何事件的单一工作流程。

它没有 - 正如我所想 - 代表一个'实例' RouteConfig(即片段,加上参数)。因此,在NavigationInstruction事件被触发后引用navigation:router:complete无意,因此无效!

我现在重写我的代码,以便在navigation:router:complete事件触发时获取标题的副本(这实际上是非平凡的,需要在指令上调用_buildTitle()私有方法) - 并且有一个FR - https://github.com/aurelia/router/issues/469 - 要求此操作不那么透明。