aurelia子ルータレンダリング親ルータ設定付き

Question

私はAppとAuthという2つのクラスを持っています。私のnavはグローバルリソースです。親ルータの値を持つ子ルータ内でnavをレンダリングするにはどうすればよいですか？私の英語のために申し訳ありません。感謝:)

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 0のオブジェクトクラス。次に、子ルーターを持つルートに行くときは、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> 

ビューモデル-その-あり-子-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>