如何將路由參數作為可綁定值傳遞給組件的視圖模型（非視圖）

Question

我使用了路線導航，可以從激活位置訪問路線參數。

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元素中顯示它時，它可以正確獲取id（在viewmodel中將其設為可綁定后）：

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

但是，我無法在等級的視圖模型（即grade.ts獲得ID

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

出現為未定義。 我試圖像我在學生中一樣通過激活來訪問它，但是看起來頁面加載時模板沒有被激活。 我認為問題不在於路由，而是通常如何在viewmodel中訪問可綁定值。 我也嘗試了一次和兩種方式的綁定模式，它們給出了相同的結果。

Answer 1

它未定義的原因是因為您在constructor調用它。 可綁定變量在attached階段中填充。

如果您嘗試在像這樣的附加方法中調用它：

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

它應該被填充。

有關Aurelia組件生命周期的更多信息，請單擊此處。