添加超链接标记后显示错误的Aurelia视图模型

Question

我正在使用Aurelia对话框服务弹出模型，当我在视图模型(模型弹出)中使用超链接标记时，它显示错误消息:超过最大调用堆栈大小

以下是代码：

HomePage.ts

import { autoinject, observable,PLATFORM } from 'aurelia-framework'; 
import { DialogController, DialogService } from 'aurelia-dialog';
import { PreviewWorkbook } from './../../components/preview-workbook/preview- workbook';
@autoinject
   constructor(private _lg: AppLogger, private _dlgs: DialogService,
     ) {  }
public PreviewMenu(e: Event): void { 
    this._dlgs.open({
        viewModel:  PreviewWorkbook, model: Workbooks
    }).whenClosed(rsp => {
        this._lg.log("Preview Menu Cancelled");
    });
}

当我在homepage.html中点击PreviewMenu()时，我得到下面的错误

​

​

PreviewWorkbook网页：-

<template>
<ux-dialog>
    <ux-dialog-header>
       Preview WorkBook
    </ux-dialog-header>
    <ux-dialog-body>
        <div repeat.for="workbook of workbooks">
            <a href="${workbook.Link}"> ${workbook.Name} </a>
        </div>          
    </ux-dialog-body>
    <ux-dialog-footer>
        <button class="btn btn-info" click.delegate="save()">Save</button>
        <button class="btn btn-default" click.delegate="cancel()">Cancel</button>
    </ux-dialog-footer>
</ux-dialog>

​

如果我只使用ul，li来绑定值，它可以很好地工作。

Answer 1

在对话框主体中添加锚定标记会导致无限循环或超出最大调用堆栈大小。

解决方案：

在HomePage.ts中

我试图通过在构造函数中添加以下代码行来修改代码：

constructor(private controller: DialogController) {
PLATFORM.moduleName('./../../components/preview-workbook/preview-Workbook');
}

所以在HomePage.ts中

import { autoinject, observable,PLATFORM } from 'aurelia-framework'; 
import { DialogController, DialogService } from 'aurelia-dialog';
import { PreviewWorkbook } from './../../components/preview-workbook/preview-Workbook';
@autoinject
constructor(private _lg: AppLogger, private _dlgs: DialogService) {
PLATFORM.moduleName('./../../components/preview-workbook/preview-Workbook');
}
    public PreviewMenu(e: Event): void { 
    this._dlgs.open({
    viewModel:  PreviewWorkbook, model: Workbooks
}).whenClosed(rsp => {
    this._lg.log("Preview Menu Cancelled");
});
}