Aurelia - 自定义元素的问题

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>

路由器绑定到导航菜单，所以我有路由。

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

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

我无权访问我的视图模型。

如果我通过删除 .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.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>

并将您的路由器注入视图模型

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

从<template>标签中删除bindable="router"

您也可以在不需要注入Router 的视图模型中创建router 另一个@bindable，但如果上述方法不适合您，您可以尝试。

Answer 2

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

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

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

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

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>

如果您想将路由器注入到您的视图模型中，则不应像在示例中那样使用视图模型绑定。您可以简单地使用依赖注入来注入路由器：

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();
        }
    }

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

Answer 3

您需要将可绑定路由器添加到您的视图模型

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

export class navmenuCustomElement {
@bindable router: Router;
}