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工作，但它適用於現在和讓我繼續。