Question

我有两个课程：App和Auth。我的导航是全球资源。如何在具有父路由器值的子路由器中呈现导航。对不起我的英语不好。感谢：）

export class App {
configureRouter(config, router) {
  config.options.pushState = true;
  config.options.root = '/'
  config.map([
    { route: '',        name: 'home',       moduleId: './modules/home/home', nav: true,   title: 'Home'},
    { route: 'auth', name: 'auth', moduleId: './modules/auth/auth',      nav: true,   title: 'Auth'}
  ]);
  config.mapUnknownRoutes({moduleId: 'errors/not-found'});
  this.router = router;
}

}

export class Auth{
configureRouter(config, router) {
    config.map([
        { route: '',            redirect: 'login'},
        { route: 'login',       name: 'login',          moduleId: './login',        title: 'Вход' },
        { route: 'register',    name: 'register',       moduleId: './register',     title: 'Регистрация' },
    ]);
  }
}

我的标题组件视图是：

<li md-waves repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
  <a href.bind="row.href">${row.title}</a>
</li>

我的标头组件类是：

import {inject} from 'aurelia-framework';
import {HttpClient, json} from 'aurelia-fetch-client';
import { Router } from "aurelia-router";

@inject(HttpClient, Router)
export class HeaderComponent {

categories = [];

constructor(http, router) {
    http
      .fetch('categories', {
       method: 'get'
     })
      .then(response => response.json())
      .then(data => {
       this.categories = data;
      })
    .catch(error => {
      alert.log('Error!');
    });

    this.router = router;
  }
}

Answer 1

您可以在childRouter课程中创建App个对象。然后，当您转到具有子路由器的路由时，请通过childRouter设置应用的overrideBindingContext。例如：

<强> app.js

export class App {
  message = 'Hello World!';
  childRouter = null;

  configureRouter(config, router) {
      config.title = "Super Secret Project";
      config.map([
          { route: ["","screen1"], name: 'screen1', moduleId: "./screen-1", nav: true, title: "Route 1" },
          { route: "screen2", name: 'screen2', moduleId: "./screen-2", nav: true, title: "Route 2" }
      ]);

      this.router = router;        
  }
}

<强> app.html

<template>
  ${message}
  <hr>
  <ul>
    <li repeat.for="row of router.navigation">
      <a href.bind="row.href">${row.title}</a>
    </li>
    <ul if.bind="childRouter">
      <li repeat.for="row of childRouter.navigation">
        <a href.bind="row.href">${row.title}</a>
      </li>
    </ul>
  </ul>
  <router-view></router-view>
</template>

查看模型 - 即-具有-A-儿童router.js

export class Screen2 { message = "Screen 2"; configureRouter(config, router) { config.map([ { route: ["", "screen-3"], name: 'screen3', moduleId: "./screen-3", nav: true, title: "Route 1" } ]); this.router = router; } bind(bindingContext, overrideContext) { const parentContext = overrideContext.parentOverrideContext.bindingContext; parentContext.childRouter = this.router; } }

正在运行示例https://gist.run/?id=8ef936453d5078c14c4980d88e9cabb1

由于您的nav是自定义元素，因此您可能需要更改其声明。像这样：

<nav router.bind="router" child-router.bind="childRouter"></nav>

希望这有帮助！

aurelia子路由器使用父路由器设置渲染导航

1 个答案: