0

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

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

我试图在 login.js 文件中注入“secondbar”类；这样我可以访问功能，但页面上的消息不会改变（似乎我正在访问“secondbar”的另一个实例）。我还尝试直接在主导航栏上打印出相同的消息，但似乎这不是正确的方法，它也不起作用。

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

应用程序.html

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

  <!-- navbar -->

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

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

应用程序.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: [''] }},
    ]);
}
}
4

1 回答 1

0

您可以做的是创建一个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>
于 2018-03-26T19:00:03.487 回答