Как отобразить заголовок текущей активной страницы в Aurelia.JS

Question

Я сейчас использую Aurelia JS. И у меня есть проблема, когда Aurelia начинает маршрутизацию, я хочу изменить титульную страницу в текущем месте в моем теге тела, именно я имею в виду не <title> тег, но внутри тела
Я копаюсь и ищу учебник, но до сих пор не могу найти правильный ответ

Я прикрепил свой код

<template bindable="router">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" mdl="layout">
    <header class="mdl-layout__header mdl-color--primary">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">${title}</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"
                id="more-button">
          <i class="material-icons">more_vert</i>
        </button>
        <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button" mdl="menu">
          <li class="mdl-menu__item">5.0 Lollipop</li>
          <li class="mdl-menu__item">4.4 KitKat</li>
          <li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
          <li class="mdl-menu__item">Android History</li>
        </ul>
        <!-- Navigation. We hide it in small screens. -->
      </div>
    </header>

Я хочу, чтобы мой ${title} отображал текущую активную страницу. Я искал вокруг, но не нашел ответ

Вот мой код app.js

import $ from 'jquery';
import {AuthorizeStep} from 'resources/AuthorizeStep';

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';

    config.map([
      {route: ['penyakit',''], name: 'penyakit', moduleId: 'pages/penyakit/penyakit', nav: true, title: 'Beranda',settings:{icon:'dashboard',color:'teal'}},
      {route: 'penyakit', name: 'penyakit', moduleId: 'pages/penyakit/penyakit', nav: true,auth:true, title: 'Penyakit',settings:{icon:'inbox',color:'blue'}},
      {route : ['penyakit/tambah','penyakit/edit/:id'], name : 'tambah_penyakit' , moduleId : 'pages/penyakit/tambah_penyakit',nav:false,auth: true,title:'Tambah Penyakit'},
      {route: 'gejala', name: 'gejala', moduleId: 'pages/gejala/gejala', nav: true, title: 'Gejala',settings:{icon:'event notes',color:'orange'}},
      {route: 'users', name: 'users', moduleId: 'pages/user/users', nav: true, title: 'Aturan CF',settings:{icon:'layers',color:'green'}},
      {route: 'users', name: 'users', moduleId: 'pages/user/users', nav: true, title: 'divider',settings:{icon:'description'}},
      {route: 'users', name: 'users', moduleId: 'pages/user/users', nav: true, title: 'Pengaturan',settings:{icon:'settings',color:'grey'}},
    ]);
    config.addPipelineStep('authorize', AuthorizeStep);

    this.router = router;
  }

  change_app_bar_color(color)
  {
    var app_bar = $('#app_bar');
    app_bar.removeClass('blue-inbox teal orange green grey');
    app_bar.addClass(color);
    console.log('F');
  }
}

Answer 1

Вы можете использовать currentInstruction.config.title объекта роутера:

this.router.currentInstruction.config.title;

Помните, что вам может потребоваться привязать маршрутизатор к веб-компоненту.