Aurelia-遇到自定义元素的问题 [英] Aurelia - Trouble with custom-element

问题描述

新手.

我有一个app.html，其中包含两个自定义元素:

I have an app.html that has two custom-elements:

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

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

The router is bound to the navmenu and so I have routing.

因为我的扩展名为.html，所以具有以下要求:

Because I have the following require with the extension .html:

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

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

I do not have access to my viewmodel.

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

If I change the require by removing the .html I loose all my navbar items.

我的navbar.ts是:

My navbar.ts is:

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"，但是我无法访问它们.我看过自定义元素的指南，但它们表示我需要导入

I have added "@binding" to the two variables I want to use but I have no access to them. I have looked at the guide for custom-elements but they are indicating I need to import

如何在不破坏我的导航栏项目的情况下访问这些变量?或..

How do I access those variables without screwing up my navbar items? or..

使用".html"引用视图时，如何访问navmenu视图模型.

How do I access the navmenu viewmodel when the view has been referenced with ".html".

这是我的navmenu.html:

Here is my 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>

推荐答案

您需要将导航栏加载为

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

并注入路由器以查看模型

and inject your router to 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
    }
}

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

您还可以在视图模型中使router成为另一个@bindable，而您无需在其中注入Router，但这是供您尝试的，如果上述方法对您不起作用.

you can also make router another @bindable in your viewmodel where you dont need to inject Router, but that's for you to try if the above doesnt work for you.

这篇关于Aurelia-遇到自定义元素的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！