2017-02-10 156 views
1

我定义的路由配置的参数化路线的多个实例:设置标题

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

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

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

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

"Page 1"` 

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

"Page 2" 
"Page 2" 

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

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

因为RouteConfig是在不同的NavigationInstructions,更改navModel.title值会影响从RouteConfig派生的所有NavigationInstructions

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

我考虑过使用新的router.transformTitle钩子,但是因为我最终可能在标题中包含更多信息,例如, "Page 1: Contents","Page 2: The First Chapter",这感觉是次优的,并且可能让我做了很多滚动我自己的体系结构来动态地解析字符串。

+0

是否有可能订阅不同虚拟机中的事件聚合器,但在离开时忘记取消订阅? –

+0

不,我订阅路由器的VM:navigation:complete在应用程序的整个生命周期内都是持久的。因此,这不是一个多路呼叫问题,只是路由器从一个RouteConfig对象获取标题,该对象在所有针对它生成的NavigationInstructions之间共享。 –

回答

1

我创建了一个非常简单的应用程序来测试这个。尽管如此,我的确采用了一些略有不同的策我在page视图模型上使用activate回调,而不是订阅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

正在使用的是何种版本的框架模块的?

+0

不确定这是测试相同的情况。在那个版本中,一次只有一个NavigationInstruction,每次访问历史记录中的任何页面时都会更新NavModel(在调用.setTitle之前,它将设置为上一页中设置的值你可以导航到)。 –

+0

虽然您可能已经暗示了解决方案。我可能不得不通过存储或更新导航标题来解决这个问题:路由器:完整的,而不是直接引用NavigationInstruction--这似乎只是为了有一个连接到特定导航操作的生命周期,而不是比所讨论的片段。 –

+0

我不确定我是否关注你。 –

0

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

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

它不像我想的那样代表RouteConfig的一个实例(即片段加上参数)。因此,在navigation:router:complete事件已经被解雇之后提及NavigationInstruction并非意图,因此不起作用!

现在我将重写我的代码拿冠军的副本,当navigation:router:complete事件触发(其实这是不平凡的,需要调用的指令_buildTitle()私有方法) - 并有提出了FR - https://github.com/aurelia/router/issues/469 - 要求这项操作不透明。