如何将路由参数作为可绑定值传递给组件的视图模型（不是视图）

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：

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

但是，我无法在等级的视图模型中获取 ID，即 grade.ts

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

显示为未定义。我尝试像在学生中那样通过激活访问它，但看起来页面加载时模板未激活。我认为问题不在于路由，而在于一般如何访问视图模型中的可绑定值。我也尝试了一次性和双向绑定模式，它们给出了相同的结果。

Answer 1

它未定义的原因是因为您在 constructor 中调用它。可绑定变量在attached阶段填写。

如果您尝试在这样的附加方法中调用它：

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

应该填写

有关 Aurelia 组件生命周期的更多信息，请单击 here

如何将路由参数作为可绑定值传递给组件的视图模型（不是视图）

How to pass route param as bindable value to component's viewmodel (not view)

aurelia

bindable