Question

根据aurelia文档中给出的示例，我打开了带有viewmodel的对话框（比如提示）。此提示有内部视图，我在其中添加“router-view”标记。

我的路线已配置完毕。因此，当我第一次打开对话框时，它会打开路径中配置的正确视图，一切正常。但是当我关闭对话框并重新打开对话框时，它没有显示第一个路径视图。如果我点击其他路线链接并回到第一条路线就行了。

我观察到它没有创建第一条路线的视图模型实例（第二次打开对话框时）。如何解决这个问题？提示html

<template><div class="row">
    <left-menu ></left-menu>
    <router-view></router-view>
  </div></template>
<template>

和left-menu.htm

<template>
<div class="list-group">
    <template repeat.for="item of items">
        <a class="list-group-item ${$parent.selectedNav === item.routeName ? 'active' : ''}" route-href="route.bind: item.routeName;" click.delegate="$parent.select(item)">${item.text}</a>
    </template>        
</div>

Answer 1

在模态窗口内使用路由器似乎对我不利。路由器用于管理页面，但模式用于管理页面内的内容。

我建议构建一个模态窗口组件，您可以使用<slot>标签注入内容并将其模型绑定设置为当前视图模型中的任何数据。

这是我用于此目的的组件示例。

<template>
  <div show.bind="visibility" class="modal-window">
    <div>
      <button class="btn btn-danger btn-sm close-button" click.delegate="close()">close</button>
    </div>
    <slot></slot>
  </div>
  <div show.bind="visibility" class="modal-window-overlay" click.delegate="close()"></div>
</template>

-

import { bindable } from 'aurelia-framework';

export class ModalContent {
    @bindable visibility: boolean;

    close(){
        this.visibility = false;
    }
}

<modal-content id.bind="'add-variant-window'">
        <h4>Modal Content</h4>
        <div>you can bind this to things on the current viewmodel</div>
</modal-content>

Aurelia router-view里面的对话框无法重新打开对话框

1 个答案: