Aurelia:子路由器路由显示在“主"中app.html <router-view> 中的导航栏和子视图元素? [英] Aurelia: child router routes display in &quot;main&quot; nav-bar and child view in app.html &lt;router-view&gt; element?

问题描述

我们想要一个侧边栏菜单和一个主要"区域.根据您的导航方式，侧边栏的菜单项会发生变化，新视图将加载到主"区域.

We want to have a sidebar menu and a "main" area. Depending on how you navigate, the sidebar's menu items will change, and a new view will be loaded into the "main" area.

我已经创建了带有 元素的 app.html 和一个可以显示主路由器导航的 nav-bar.html.假设我最初将管理"和报告"作为路由(以及菜单项).当用户点击管理"时，我希望菜单更新以显示子路由(比如用户"和设置")并在 app.html 的 <router 中显示管理视图模型-视图>.

I've created app.html with a <router-view> element, and a nav-bar.html that can display the main router's navigation. Let's say that I initially have "Administration" and "Reports" as routes (and therefore menu items). When a user clicks on "Administration", I'd like the menu to update to display child routes (say "Users" and "Settings") and have the admin view-model display in the app.html's <router-view>.

最初我试图创建一个子路由器，但后来我必须在 admin.html 中有一个新的 <router-view> (没有这个页面甚至不会加载).相反，我希望 admin.html 视图显示在 app.html 的 <router-view> 内，并让子路由替换导航栏菜单中的主"路由.

Initially I tried to create a child router, but then I have to have a new <router-view> inside of admin.html (the page won't even load without this). Instead, I want the admin.html view to display inside the <router-view> of app.html, and for the child routes to replace the "main" routes in the nav-bar menu.

在 app.js 中，我有以下路由器配置:

In app.js I have the following router config:

this.router.configure((config) => {
    config.title = "Welcome";
    config.map([
        { route: "", moduleId: "welcom", nav: false, title: "Welcome" },
        { route: "reports", moduleId: "reports", nav: true, title: "Reports" },
        { route: "admin", moduleId: "users", nav: true, title: "Administration" },
    ]);
});

在 users.js 中，我有这个代码:

In users.js, I have this code:

this.router.configure((config) => {
    config.title = "Users";
    config.map([
        { route: "", moduleId: "users", nav: true, title: "Users" },
        { route: "settings", moduleId: "settings", nav: true, title: "Settings" },
    ]);
});

最初，菜单应该是:
- 管理
- 报告

Initially, the menu should be:
- Administration
- Reports

和welcome.html"应该是<router-view>中的视图(默认路由是'welcome').

and "welcome.html" should be the view in the <router-view> (the default route is 'welcome').

当用户点击(导航到)管理"时，菜单应刷新为:
- 用户- 设置

When the user clicks (navigates to) "Administration", the menu should refresh to be:
- Users - Settings

在中使用users.html".

with "users.html" in the <router-view>.

然而，为了让它完全工作，我需要在users.html"中有一个进一步的<router-view>，这不是我真正想要的(我想要在 app.html 的 中加载视图.

However, in order to get this to work at all I need to have a further <router-view> in "users.html" and that's not really what I want (I want the view to load in the app.html's <router-view>).

有没有办法在 Aurelia 中实现这一目标?我什至尝试将父路由器注入 Admin 构造函数(使用 Parent.of(router) 绑定)然后 router.addRoute().路由被添加，但菜单没有更新(即使它是数据绑定的).

Is there a way to achieve this in Aurelia? I've even tried injecting the parent router into the Admin constructor (using Parent.of(router) binding) and then router.addRoute(). The route gets added, but the menu doesn't update (even though it's data bound).

推荐答案

我使用 Aurelia 创建了一个示例，该示例使用左侧菜单实现了分层菜单结构.

I created a sample using Aurelia that implements a hierarchical menu structure using a left-side menu.

这里是关于示例的注释项目

您可以在线运行示例进行测试

多级菜单示例展示了如何在构建 Aurelia SPA 网站时快速创建分层菜单.

The multi-level menu sample shows how you can quickly create a hierarchical menu when building an Aurelia SPA website.

多级菜单可帮助用户浏览页面层次结构.

The multi-level menu helps users navigate through a hierarchy of pages.

很容易配置路由和层次结构，如下所示:

It is easy to configure the routes and the hierarchy as shown below:

import aur = require("aurelia-router");
import mlmps = require("./MultiLevelMenuPipelineStep");

export class App {
    static inject = [aur.Router];

    constructor(public router: aur.Router) {
        this.router.configure((config) => {
            config.title = "Aurelia VS/TS";
            config.addPipelineStep("modelbind", mlmps.MultiLevelMenuPipelineStep);
            config.map([
                { route: ["", "home"], moduleId: "views/home", nav: true, title: "home", settings: { level: 0, show: true } },
                { route: ["item-1"], moduleId: "views/item-1", nav: true, title: "item 1", settings: { level: 0, show: true } },
                { route: ["item-1-1"], moduleId: "views/item-1-1", nav: true, title: "item 1.1", settings: { level: 1, show: false } },
                { route: ["item-1-2"], moduleId: "views/item-1-2", nav: true, title: "item 1.2", settings: { level: 1, show: false } },
                { route: ["item-2"], moduleId: "views/item-2", nav: true, title: "item 2", settings: { level: 0, show: true } },
                { route: ["item-2-1"], moduleId: "views/item-2-1", nav: true, title: "item 2.1", settings: { level: 1, show: false } },
                { route: ["item-2-2"], moduleId: "views/item-2-2", nav: true, title: "item 2.2", settings: { level: 1, show: false } },
                { route: ["item-2-2-1"], moduleId: "views/item-2-2-1", nav: true, title: "item 2.2.1", settings: { level: 2, show: false } },
                { route: ["item-2-2-2"], moduleId: "views/item-2-2-2", nav: true, title: "item 2.2.2", settings: { level: 2, show: false } },
                { route: ["item-2-3"], moduleId: "views/item-2-3", nav: true, title: "item 2.3", settings: { level: 1, show: false } }
            ]);
        });
    }
}

level 属性用于建立层次结构.show 属性控制菜单中路线的可见性.路由器导航管道步骤查看目标导航并相应地设置路线可见性.导航助手提供了一个按钮，用于从当前路线向上导航一级，并调用相应的导航命令到路由器.

The level property is used to establish the hierarchy. The show property controls the visibility of the route in the menu. The router navigation pipeline step looks at the target navigation and sets the route visiblity accordingly. The navigation helper provides a button to navigate up a level from the current route, and invokes the corresponding navigation commmand to the router.

这篇关于Aurelia:子路由器路由显示在“主"中app.html <router-view> 中的导航栏和子视图元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！