Question

新手。

我有一个app.html，它有两个自定义元素：

<template>
    <require from="../navmenu/navmenu.html"></require>
    <require from="./app.css"></require>
    <!--We want the nav bar to span the page-->
    <div class="container-fluid">
        <navmenu router.bind="router"></navmenu>
    </div>
    <!--We want the media to centre so we use just container-->
    <div class="container">
        <div className='col-sm-12'>
            <div className='row'>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

路由器绑定到navmenu，所以我有路由。

因为我有以下要求，扩展名为.html：

<require from="../navmenu/navmenu.html"></require>

我无法访问我的viewmodel。

如果我通过删除.html来更改要求，则会丢失所有导航栏项目。

我的navbar.ts是：

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

@autoinject
@customElement('navmenu')
export class Navmenu {

    @bindable public isLoggedIn: boolean = false;
    @bindable public userName: string = 'anonymous';

    constructor(public loggedInService: LoggedInService) {
        this.isLoggedIn = loggedInService.isAuthenticated();
        this.userName = loggedInService.getUserName();
    }
}

我已将“@binding”添加到我想要使用的两个变量中，但我无法访问它们。我查看了自定义元素的指南，但它们表明我需要导入

如何在不搞砸导航栏项目的情况下访问这些变量？或..

当视图以“.html”引用时，如何访问navmenu视图模型。

这是我的navmenu.html：

<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>
    </div>
    LoggedIn Value: ${ isLoggedIn }
</template>

Answer 1

您需要将导航栏加载为

<require from="../navmenu/navmenu"></require>

并将您的路由器注入viewmodel

import { autoinject, bindable, bindingMode } from "aurelia-framework"
import { LoggedInService } from "../components/auth/LoggedInService"
import { Router } from 'aurelia-router'

@autoinject
export class NavMenu {
    loggedInService: LoggedInService
    router: Router

    @bindable isLoggedIn: boolean = false
    @bindable userName: string = 'anonymous'

    constructor(loggedInService: LoggedInService, router: Router ) {
        this.isLoggedIn = loggedInService.isAuthenticated()
        this.userName = loggedInService.getUserName()
        this.router = router
    }
}

从bindable="router"代码

中删除<template>

你也可以在你的视图模型中router另一个@bindable，你不需要注入Router，但如果以上内容对你不起作用，你可以试试。

Answer 2

如果你想使用任何javascript，你必须导入viewmodel，所以在你的情况下，使用<require from="../navmenu/navmenu"></require>是正确的方法。

我认为你误解了@bindable()的含义。 @bindable()表示您可以在创建元素时绑定该值，如下所示：

<navmenu username.bind="user.name"></navmenu>

您的视图中可以访问视图模型中声明为public的任何属性：

export class Navmenu {

    public isLoggedIn: boolean = false;
    public userName: string = 'anonymous';

    constructor(public loggedInService: LoggedInService) {
        this.isLoggedIn = loggedInService.isAuthenticated();
        this.userName = loggedInService.getUserName();
    }
}

<template>
  <span>${userName} is logged in: ${isLoggedIn}</span>
</template>

如果要将路由器注入viewmodel，则不应像在示例中那样使用viewmodel绑定。您可以使用依赖注入简单地注入路由器：

import { Router } from "aurelia-routing";
import { autoinject } from "aurelia-framework";
import { LoggedInService } from "../components/auth/LoggedInService";
import { customElement } from "aurelia-templating";

@customElement('navmenu')
@autoinject()
export class Navmenu {

        public isLoggedIn: boolean = false;
        public userName: string = 'anonymous';

        constructor(
            public loggedInService: LoggedInService,
            public router: Router) {
            this.isLoggedIn = loggedInService.isAuthenticated();
            this.userName = loggedInService.getUserName();
        }
    }

然后在您的viewmodel和/或视图中访问它。

Answer 3

您需要向viewmodel添加可绑定路由器

import { bindable, autoinject } from "aurelia-framework";
import { Router } from 'aurelia-router';

export class navmenuCustomElement {
@bindable router: Router;
}

Aurelia - 自定义元素的麻烦

3 个答案: