Aurelia-如何从我的导航菜单访问变量，并能够测试其是真还是假 [英] Aurelia - How to access a variable from my navmenu and be able to test whether its true or false

问题描述

新手

我正在尝试访问我的视图模型中的布尔变量.我的视图模型使用返回布尔值的函数访问类.在这种情况下，其是否已登录.

I am trying to access a Boolean variable in my view-model. My view-model accesses a class with a function that returns a boolean value. In this case whether its logged in.

我想做的是使用if.bind来显示或隐藏菜单元素.

What I want to do is use the if.bind to either show or hide a menu element.

我的导航菜单如下:

            <template bindable="router">
            <require from="./navmenu.css"></require>
            <div class="main-nav">
                <div class="navbar navbar-inverse">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#/home">Jobsledger.API</a>
                    </div>
                    <div class="navbar-collapse collapse">

                        <ul class="nav navbar-nav">

                            <li repeat.for="row of router.navigation" class="${ row.isActive ? 'link-active' : '' }">
                                <a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>

                                <a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
                                   if.bind="row.settings.nav">
                                    ${row.title}
                                    <span class="caret"></span>
                                </a>

                                <ul if.bind="row.settings.nav" class="dropdown-menu">
                                    <li repeat.for="menu of row.settings.nav">
                                        <a href.bind="menu.href">${menu.title}</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                    test ${loggedIn}
            </div>
        </template>

这已经检查了路由器行的导航.我也想检查我的布尔变量，但是我不知道如何简单地访问这个变量.看来我必须在函数中具有值，而不能仅提供它.

This already checks the router row for nav. I want to also check my boolean variable however I dont know how to simply access this variable. It seems I have to have the value inside a function and not have it just available.

我尝试使用@bindable(如下所示)，并且还将该变量放入等于构造函数中函数值的变量，但是我什至无法在简单的测试中显示它-"test $ {loggedIn}"(请参见导航菜单的底部).

I tried using @bindable (as below) and also placed the variable, equal to the value of the function in the constructor but I cant even get it to show in a simple test - "test ${loggedIn}" (see the bottom of the navmenu).

这是我的导航视图模型:

Here is my navmenu view-model:

        import { autoinject, inject, NewInstance } from "aurelia-framework";
        import { LoggedInService } from "../components/auth/LoggedInService";
        import { bindable } from "aurelia-templating";

        @autoinject
        @bindable
        export class Navmenu {
            private testAuthentication: LoggedInService;
            @bindable public loggedIn: boolean = this.testAuthentication.isAuthenticated();

            constructor(testAuthentication: LoggedInService) {
                this.testAuthentication = testAuthentication;
                this.loggedIn = this.testAuthentication.isAuthenticated();

            }

        }

我如何访问此"loggedIn"变量，然后测试loginIn = true等?

How can I access this "loggedIn" variable and so test for whether loggedIn = true etc?

推荐答案

，前提是您的LoggedInService看起来像

with the assumption that your LoggedInService looks something like

export class LoggedInService {
    ....
    public loggedIn: boolean
    // you can set loggedIn to true or false on login, logout, token_expire, storage_change etc     
    ...
}

您可以从以下组件访问LoggedInService中可用的loggedIn值

you can access loggedIn value available in LoggedInService from components as below

import { autoinject } from "aurelia-framework"
import { LoggedInService } from "../components/auth/LoggedInService"

@autoinject
export class NavMenu {
    auth: LoggedInService

    constructor(auth: LoggedInService) {
        this.auth = auth;
    }

    toggleloggedInTest() { // just for testing
      this.auth.loggedIn = !this.auth.loggedIn
   }
}

并在您看来进行测试

<div>
   <button click.delegate="toggleloggedInTest()" type="button">Test</button>
    testing loggedIn: ${auth.loggedIn}
</div>

这篇关于Aurelia-如何从我的导航菜单访问变量，并能够测试其是真还是假的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！