aurelia子路由器渲染導航父路由器設置

Question

我有兩個類：應用程序和身份驗證。我的導航是全球資源。我如何使用父路由器的值在子路由器中呈現導航。對不起我的英語不好。謝謝:)

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班。然後，當您轉到具有子路由器的路由時，通過overrideBindingContext設置App的childRouter。例如：

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> 

希望這有助於！