我正在尝试使用aurelia和typescript实现Web应用程序。 我从aurelia-skeleton-typescript-webpack项目开始作为基础。 在导航栏中，我还插入了一个微调器，用于选择各种城市位置，这应该调用一个方法，该方法又发布一条消息，以便在app.js中，订户应该显示相应城市的视图。 我已经实现了视图 nav-bar-spinner.html 和视图模型 nav-bar-spinner.ts ，它在视图导航中创建微调器-bar.html 即可。然后将 nav-bar.html 作为模板插入 app.html 。 每个微调器项都有一个调用 publishLocation（'city'）的方法，它是bindet的视图模型 nav-bar-spinner.ts 。
现在，当我点击一个微调项目时，我收到错误：“错误：publishNavLocation不是函数”
我的事情是绑定问题。我在 app.ts 中从对象nav-bar-spinner进行自定义实例化。
我如何才能正确绑定？ 我很乐意提供一些提示。
这里是代码：
app.html
Sub Excel_Export_Proposal_Revised()
Dim wb As Workbook, wsQuote As Worksheet
Dim myRange As String, Proposalname As String, FolderPath As String
Dim iVis As XlSheetVisibility
Set wb = ThisWorkbook
Set wsQuote = wb.Sheets("QUOTE")
FolderPath = wb.Path & "\"
Proposalname = "Quote for " & wsQuote.Range("B2").Value2
'Update myRange with the address of the range to be printed
myRange = "$B$2:$O$58" 'Change as required
Application.ScreenUpdating = False
With wsQuote.PageSetup
.PrintArea = myRange
.FitToPagesTall = 1
.FitToPagesWide = 1 'Set FitToPagesWide to 1
.LeftMargin = Application.InchesToPoints(0.7)
.RightMargin = Application.InchesToPoints(0.4)
.TopMargin = Application.InchesToPoints(0.75)
.BottomMargin = Application.InchesToPoints(0.75)
End With
'Proposal
wb.Unprotect
With wsQuote
iVis = .Visible
.Visible = xlSheetVisible
.Activate
.ExportAsFixedFormat Type:=xlTypePDF, _
Filename:=FolderPath & Proposalname & ".pdf", _
Quality:=xlQualityStandard, IncludeDocProperties:=True, _
IgnorePrintAreas:=False, OpenAfterPublish:=True
.Visible = iVis
End With
wb.Protect
Application.ScreenUpdating = True
End Sub
app.ts
<template>
<require from="nav-bar.html"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<div class="row">
<router-view swap-order="after" class="col-md-12"></router-view>
</div>
</div>
</template>
NAV-一个bar.html
import {Redirect} from 'aurelia-router';
import {Router, RouterConfiguration} from 'aurelia-router';
import {EventAggregator} from 'aurelia-event-aggregator';
import {inject} from 'aurelia-framework';
import {NavBarSpinner} from './nav-bar-spinner';
@inject(EventAggregator)
export class App
{
navBarSpinner;
constructor(private ea: EventAggregator)
{
this.navBarSpinner = new NavBarSpinner('hello world')
}
router : Router;
configureRouter(config: RouterConfiguration, router: Router)
{
config.title = 'bbv AmbientMonitor';
config.map([
{ route: '', name: 'login', moduleId: './login', nav: true, title: 'Anmeldung' },
{ route: 'live-view-all', name: 'live-view-all', moduleId: './live-view-all', nav: true, title: 'Live-Ansicht' },
{ route: 'live-view-zg', name: 'live-view-zg', moduleId: './live-view-zg', nav: true, title: 'Live-Ansicht' },
.
.
.
.
.
.
{ route: 'historical-view', name: 'historical-view', moduleId: './historical-view', nav: true, title: 'Historie-Ansicht'}
]);
this.router = router;
}
attached()
{
this.ea.subscribe('nav::toggleLogin', (data) =>
{
console.log('Subscribe data is: ' + data.nav);
this.router.navigateToRoute(data.nav);
});
}
}
NAV-BAR-spinner.html
<template bindable="router">
<require from="./nav-bar-spinner"></require>
<!-- <require from="nav-bar-spinner.html"></require> -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-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="#">
<i class="fa fa-home"></i>
<span>${router.title}</span>
</a>
</div>
<div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
<ul class="nav navbar-nav">
<div class="pull-left">
<compose class="nav navbar-nav" view="nav-bar-spinner.html" view-model.bind="navBarSpinner"></compose>
</div>
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
</li>
</ul>
<!-- <ul class="nav navbar-nav navbar-right">
<li class="loader" if.bind="router.isNavigating">
<i class="fa fa-spinner fa-spin fa-2x"></i>
</li>
</ul> -->
</div>
</nav>
</template>
NAV-BAR-spinner.ts
<template bindable="navBarSpinner">
<li class="dropdown">
<div as-element="compose" view-model.bind="navBarSpinner"></div>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Standort <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" click.trigger="publishNavLocation('live-view-zg')">Zug</a></li>
<li><a href="#" click.trigger="publishNavLocation('live-view-zh')">Zürich</a></li>
<li><a href="#" click.trigger="publishNavLocation('live-view-be')">Bern</a></li>
<li><a href="#" click.trigger="publishNavLocation('live-view-lu')">Luzern</a></li>
<li><a href="#" click.trigger="publishNavLocation('live-view-mu')">München</a></li>
</ul>
</li>
</template>
答案 0 :(得分：0)
您的问题在于以下几行：
view-model.bind="navBarSpinner"
Aurelia无法正确处理此问题。它是类的名称，但您需要在HTML属性中以不同方式解决它。
view-model.bind="nav-bar-spinner"
这告诉Aurelia要找一个名为NavBarSpinner的小组。
P.S。我还建议你看一下Aurelia Dependency Injection如何工作，你现在有很多不必要的（和错误的）代码。
答案 1 :(得分：0)
感谢您的提示。在更好地阅读了aurelia doc后，我解决了我的问题。 这里是我对打字稿的更改：
使用自动注入进行注册
import { autoinject } from 'aurelia-framework';`
-
-
-
@autoinject( EventAggregator )
export class NavBarSpinner {
constructor(private ea: EventAggregator) {}
-
-
-
在nav-bar.html中我插入了nav-bar-spinner.html，绑定了view-model =＆＃34; nav-bar-spinner＆＃34;
<div class="pull-left">
<compose class="nav navbar-nav" view-model="nav-bar-spinner"></compose>
</div>
并删除了其他不必要的绑定和要求。