从主路由器内的页面访问另一个模型视图

Question

我正在尝试找到一种方法来创建自定义视图模型并使其功能可从主路由器视图元素中的页面访问。这个自定义视图模型，在我的例子中称为 "secondbar" 应该位于主导航栏下并且应该包含登录状态 ("Logged in as ..." / "Not logged in")。

在我的路由器视图中，其中一个页面是登录页面。成功登录后，我希望能够直接调用 "secondbar" 的函数，以便在不刷新页面的情况下更改那里的登录状态。

我试图在 login.js 文件中注入 "secondbar" class；这样我就可以访问函数，但页面上的消息不会改变（看起来我正在访问 "secondbar" 的另一个实例）。我还尝试直接在主导航栏上打印出相同的消息，但似乎这不是正确的方法，也没有用。

有什么方法可以直接访问 "secondbar" class（浏览器中显示相同的实例）并从路由器内的页面调用位于那里的函数-查看？

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 和登录名 page-view。基本看起来像这样：

login-page:

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>

从主路由器内的页面访问另一个模型视图

Accessing another model-view from a page inside the main router

aurelia

aurelia-di