Question

新手，

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

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

我的导航菜单如下：

serial = ((Number) doc.get(DBConstants.SERIAL)).longValue()

这已经检查了路由器行以进行导航。我也想检查我的布尔变量但是我不知道如何简单地访问这个变量。看来我必须在函数中包含值，而不是只有它才可用。

我尝试使用@bindable（如下所示）并且还放置了变量，等于构造函数中函数的值，但是我甚至无法在简单的测试中显示它 - “test $ {loggedIn}”（参见导航的底部）。

这是我的navmenu view-model：

            <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>

如何访问此“loggedIn”变量，以便测试loggedIn = true等？

Answer 1

假设您的LoggedInService看起来像

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

您可以从组件中访问LoggedInService中的loggedIn值，如下所示

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 - 如何从我的navmenu访问变量，并能够测试其真或假

1 个答案: