Доступ к другому виду модели со страницы внутри основного маршрутизатора

Question

Я пытаюсь найти способ создания пользовательской модели представления и сделать ее функции доступными со страницы в основном элементе router-view. Предполагается, что эта пользовательская модель представления, которая в моем случае называется "secondbar", расположена под главной навигационной панелью и должна содержать статус входа в систему ("Зарегистрировано как..." / "Не авторизовано").

В моем просмотре маршрутизатора одна из страниц является страницей входа. После успешного входа в систему я хочу иметь возможность вызывать функцию "secondbar" напрямую, чтобы изменить статус входа в систему без обновления страницы.

Я пытался внедрить класс "secondbar" в файл login.js; таким образом я могу получить доступ к функциям, но сообщение на странице не изменится (кажется, что я получаю доступ к другому экземпляру "secondbar"). Я также пытался распечатать это же сообщение прямо на главной навигационной панели, но кажется, что это неправильный подход, и он тоже не сработал.

Есть ли какой-то способ, как я могу получить доступ к классу "secondbar" напрямую (тот же самый экземпляр отображается в браузере) и вызвать функцию, расположенную там, со страницы в представлении роутера?

App.html

<template bindable="router">
  <require from="secondbar/secondbar"></require>

  <!-- navbar -->

  <secondbar view-model.ref="secondbar"></secondbar>

   <router-view>
    <!—- page content -->
  </router-view>
</template>

App.js

import {Redirect} from 'aurelia-router';
import {inject} from 'aurelia-framework';

export class App {

configureRouter(config, router) {
    this.router = router;
    config.title = ‘’;
    config.map([
        { route: [''], name: 'home', moduleId: 'home/index', nav: true, title: 'Home' , settings: { roles: [''] }},
        { route: 'login', name: 'login', moduleId: 'login/login', nav: true, title: 'Log In', settings: { roles: [''] }},
    ]);
}
}

Answer 1

Что вы могли бы сделать, это создать login-service или что-то подобное, где вы можете связать в обоих secondbar и просмотр страницы входа в систему. Основное будет выглядеть так:

страница авторизации:

import login-service from "/login-service/login-service";

// inject    

login() {
  // do login stuff
  this.loginService.currentUser = user; // user would be any object of choice
}

secondbar.js:

import login-service from "/login-service/login-service";

// inject    

secondbar.html

<span if.bind="loginService.currentUser">
  Logged in as: ${loginService.currentUser.username}
</span>
<span if.bind="!loginService.currentUser">
  Not logged in
</span>