2017-11-21 3 views
1

私はactivateからルートパラメータにアクセスするルートナビゲーションを使用しました。Aurelia - コンポーネントのviewmodel(ビューではない)にバインド可能な値としてルートパラメータを渡す方法

app.ts

export class App { 
    configureRouter(config) { 
    config.map([ 
     { route: 'student/:id', name: 'student', moduleId: 'student', nav: true, title: 'student', href: '#' } 
    ]); 
} 

}

student.ts

export class Student { 
    id; 

activate(params) { 
    this.id = params.id; 
    } 
} 

ページその経路が通過するこのパラメータを必要とするいくつかのコンポーネントを使用して構築されます。私の学年ビューで

<template> 
    <require from="grade" > </require> 
    <h1> Student - ${id} </h1> 
    <grade id.bind="id"></grade> 
    <department id.bind="id"></department> 
<template> 

私はhtml要素(私はそれのviewmodelでバインド可能行った後)に表示するとき、それは正確にIDを取得します。

grade.html <span>${id}</span>

しかし、I共同 grade.ts

export class Grade{ 
     @bindable id; 
     constructor() { 
      console.log("id=", this.id}; 
} 

すなわちグレードののviewmodelにIDを取得することはできません定義されていません。私は学生の場合と同じようにアクテイブでアクセスしようとしましたが、ページが読み込まれたときにテンプレートがアクティブにならないように見えます。私は問題がルーティングではないと思うが、一般的にviewmodelでバインド可能な値にアクセスする方法。私はワンタイムと双方向バインディングモードも試みましたが、同じ結果が得られました。

答えて

2

constructorで呼び出しているため、定義されていない理由があります。結合可能な変数は、attachedフェーズで埋められます。

あなたは、このような添付の方法でそれを呼び出してしようとした場合:

attached() { 
    console.log("id=" + this.id); 
} 

それが満たされなければなりません。

アウレリアコンポーネントのライフサイクルの詳細については、)(here

+1

はまた、前に添付発生バインド()フェーズで利用可能である必要があります。 –

関連する問題