Aurelia嵌套路由器和路由器视图

Question

我想在屏幕上有一个课程列表(人为设计的例子)。当您单击某个课程时，它会展开(仍然显示课程列表)，成为选修该课程的学生列表。当我单击一个学生时，它必须展开为学生详细信息的视图(仍然显示学生列表和课程列表)。等。

所以基本上我想要嵌套的路由器，我想？

例如，app.js

config.map([
        {route: "", moduleId: 'no-selection', title: 'Select'},
        {route: "course/:course-id", moduleId: 'course',    name: 'course'}
]);

Course.js(注入路由器)：

this.router.configure(config => {
        config.map([
            {route: "course/:course-id/student/:student-id", name: "student", moduleId: "student"}
        ]);
})

student.html有自己的路由器视图元素

上面的方法是有效的，但是当我点击一个顶级链接(一个课程)时，内容会被放在内部的路由器视图中。更糟糕的是，现在每个学生都有一个扩展的路由器视图，我该如何管理？

基本上，我找不到任何关于如何做到这一点的文档-子路由器的东西似乎不完全是我所需要的？任何帮助都将不胜感激。

Answer 1

让我们来看看这一点，以及我们如何用一台路由器实现这一点。下面是我可能使用的路由结构。

[
  { route: "", moduleId: 'no-selection', title: 'Select'},
  { route: "course/:courseId/:studentId?", moduleId: 'course',    name: 'course'}
]);

studentId参数是可选的。

然后，我将研究如何使用此课程页面仅根据它在activate回调中接收的参数来执行您想要的所有操作。

我现在没有时间给出一个完整的答案，但希望这能帮助你走上正确的道路！