Aurelia儿童路由如何使用参数工作？

Question

我觉得好像有类似的问题已经被问到，但我一直无法找到我的答案。

我想通过它的功能来隔离我的应用程序。理想情况下，每个功能都可以设置自己的路由，而Aurelia的子路由功能似乎是最合适的，但我无法使其工作。

应用程序的结构是这样：

app.ts 
app.html 
    /lectures 
    list.ts 
    list.html 
    details.ts 
    details.html 
    index.ts 
    index.html 

如果需要的话来回答这个问题，而是试图保持的问题尽可能紧凑，我可以包括任何其他文件。 app.html和lectures/index.html文件都只包含<template><router-outlet></router-outlet></template>。

我有app.ts：

import { Router, RouterConfiguration } from 'aurelia-router'; 

export class App { 
    configureRouter(config: RouterConfiguration, router: Router) { 
    config.options.pushState = true; 
    config.map([ 
     { 
     moduleId: './public-site/lectures', 
     name: 'lectures', 
     nav: true, 
     route: ['', 'lectures/:id?'], 
     title: 'Lectures' 
     } 
    ]); 
    } 
} 

lecture/index.ts

import { Router, RouterConfiguration } from 'aurelia-router'; 

export class Index { 
    configureRouter(config: RouterConfiguration, router: Router) { 
    config.options.pushState = true; 

    config.map([ 
     { route: '', moduleId: './list' }, 
     { route: ':id', moduleId: './details' } 
    ]); 
    } 
} 

，然后我有lectures/details.ts

import { NavigationInstruction, RouteConfig, RoutableComponentActivate } from 'aurelia-router'; 

export class LectureDetails implements RoutableComponentActivate { 
    activate(params: any, routeConfig: RouteConfig, navigationInstruction: NavigationInstruction): Promise<any> { 
    debugger; 
    } 
} 

和lecture\list.html

<template> 
     <div repeat.for="lecture of lectures" class="grid-body-cell" click.delegate="navigateToLecture(lecture)"> 
      ${lecture.title} 
     </div> 
</template> 

lecture\list.ts

import { autoinject } from 'aurelia-framework'; 
import { Router } from 'aurelia-router'; 

@autoinject() 
export class LecturesList { 
    constructor(private router: Router) {} 

    navigateToLecture(lecture: {id:number}) { 
    this.router.navigate(`#/lectures/${lecture.id}`); 
    } 
} 

当应用程序加载时，它正确地导航并显示在列表页面，但是当我点击任何讲座在网格中，URL更新/讲座/ 1，但我的调试器语句永远不会被击中。我无法弄清楚我做错了什么。

似乎正在发生的事情是，当url被更新时，路由器仍然将应用程序指向列表组件。有没有办法让路由器承诺并将参数传递给子路由器？

如何更新我的设置以使子路由器使用参数？

Answer 1

首先，显示路由的观点路由器元素被称为<router-view>所以你的孩子路由器的观点应该是：<template><router-view></router-view></template> - 我相信<router-outlet>是你的路由角2+应用程序中使用的东西。我在这里假设你已经在做这个，如果你看到东西被渲染。

其次，你有config.options.pushState = true定义在你的根路由器配置，然后在navigateToLecture方法中你传递一个散列（这是你会做什么，如果你不使用pushState）。因此，Aurelia正在从URL中删除哈希（如预期的那样），因为您使用的是pushState，pushState URL不需要使用#黑客。

第三，我会命名你的路线（你会发现为什么在一瞬间）。命名你的路线可以让你通过名字引用它们，并使用navigateToRoute('routename', {paramsobject})或route-href（我们将在下面讨论）。

所以，在lecture/index.ts，把name财产上的路线：

import { Router, RouterConfiguration } from 'aurelia-router'; 

export class Index { 
    configureRouter(config: RouterConfiguration, router: Router) { 
    config.options.pushState = true; 

    config.map([ 
     { route: '', name: 'lecture-list', moduleId: './list' }, 
     { route: ':id', name: 'lecture-detail', moduleId: './details' } 
    ]); 
    } 
} 

最后，而不是在你的视图中点击事件，呼吁router.navigate，你可以使用route-href属性，这将使您可以使链接与路由器一起工作。因此，类似如下：

<template> 
     <div repeat.for="lecture of lectures" class="grid-body-cell"> 
      <a route-href="route: lecture-detail; params.bind: { id: lecture.id }">${lecture.title}</a> 
     </div> 
</template> 

注意我们是如何被它的名字，lecture-detail引用我们的新命名的路线？现在奥里利亚将通过并解析我们的链接，并更新href属性，以便将它放在需要的位置。

希望有所帮助。

Answer 2

app.html

<template><router-view></router-view></template> 

app.ts

import { Router, RouterConfiguration } from 'aurelia-router'; 

export class App { 
    configureRouter(config: RouterConfiguration, router: Router) { 
    config.pushState = true; 
    config.map([ 
     { 
     moduleId: './lectures/index', 
     name: 'lectures', 
     nav: true, 
     route: ['', 'lectures/*id'], 
     title: 'Lectures' 
     } 
    ]); 
    }; 
} 

lectures/index.html

<template><router-view></router-view></template> 

lectures/list.html

<template> 
     <div repeat.for="lecture of lectures" class="grid-body-cell" click.delegate="navigateToLecture(lecture)"> 
      ${lecture.title} 
     </div> 
</template> 

lectures/list.ts

import { autoinject } from 'aurelia-framework'; 
import { Router } from 'aurelia-router'; 

@autoinject() 
export class LecturesList { 
    constructor(private router: Router) {} 

    navigateToLecture(lecture: {id:number}) { 
    this.router.navigateToRoute(`lectures`, { id: lecture.id }); 
    } 
} 

这把我敲我的头靠在墙上的时间，我甚至不能确定这将继续当我添加更多路由到lectures/index.ts工作，但它适用于现在和让我继续。