CODEWITHSUNDEEP
aurelia
Роман Бусарев
Роман Бусарев

Reputation: 13

aurelia child router render nav with parent router settings

i have two classes: App and Auth. My nav is global-resource. How can i render nav in a child router with values of a parent router. Sorry for my english. Thanks:)

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: 'Регистрация' },
    ]);
  }
}

My header-component view is:

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

My header-component class is:

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;
  }
}

Upvotes: 1

Views: 616

Answers (1)

Fabio
Fabio

Reputation: 11990

You could create a childRouter object in your App class. Then, when you go to the route that has a child router, set App's childRouter through the overrideBindingContext. For example:

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>

view-model-that-has-a-child-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;
  }
}

Running example https://gist.run/?id=8ef936453d5078c14c4980d88e9cabb1

Since your nav is a custom-element, you might have to change its declaration. Something like this:

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

Hope this helps!

Upvotes: 3

Related Questions