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>が含まれています。

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

を持っている：

私が持っているapp.tslecture\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}`); 
    } 
} 

アプリの負荷が、それは正しくナビゲートし、リストページが表示されますが、10

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

私は、グリッド内の講義のいずれかをクリックすると、へのURLの更新/講義/ 1が、私のデバッガーのステートメントは決してヒットしません。私は何が間違っているのか分かりません。

URLが更新されても、ルータは依然としてアプリケーションをリストコンポーネントに誘導しています。ルータを尊重して子ルータにパラメータを渡す方法はありますか？

子ルータにパラメータを設定させるには、設定を更新する必要がありますか？

Answer 1

まず、ルーティングされたビューを表示するためのルータの要素がそのように子ルータのためのあなたの意見がどうあるべき<router-view>と呼ばれる：<template><router-view></router-view></template> - 私は<router-outlet>は、ルーティングのための角度2+用途に使用するものであると信じています。私はあなたが物事がレンダリングされているのを見ているなら、あなたがすでにそれをやっているという前提をここで作っています。

第二に、あなたがconfig.options.pushState = trueをあなたのルートルータの設定に定義され、その後、あなたは（あなたがpushStateを使用していない場合はどうなるのかである）ハッシュを渡しているあなたのnavigateToLecture方法の内側にしています。したがって、AureliaはpushStateとpushState URLを使用しているため、URLからハッシュを削除しています（#ハックを使用する必要はありません）。

第3に、私はあなたのルートに名前をつけます。あなたのルートに名前をつけて名前で参照し、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属性を使用することができますあなたはルータとのリンクを作れるようにします。だから、次のようなもの：私たちは、その名前、lecture-detailによって私たちの新しい名前のルートを参照しているか

<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> 

お知らせ？今すぐAureliaが来て、私たちのリンクを解析し、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に多くのルートを追加したときにこれが機能し続けるさえわからないんだけど、それは今の作品私は続けることができます。