对话框内的 Aurelia 路由器视图无法重新打开对话框答案

【问题标题】：Aurelia router-view inside dialog not working on reopening dialog对话框内的 Aurelia 路由器视图无法重新打开对话框
【发布时间】：2017-07-26 15:49:40
【问题描述】：

根据 aurelia 文档中给出的示例，我正在打开带有 viewmodel 的对话框（比如 prompt ）。这个提示有我在其中添加“路由器视图”标签的视图。

我的路线已经配置好了。因此，当我第一次打开对话框时，它会打开路线中配置的正确视图，并且一切正常。但是当我关闭对话框并重新打开对话框时，它没有显示第一个路线视图。如果我单击其他路线链接并返回到第一条路线，它就可以工作。

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

【问题讨论】：

我同意下面的 4imble。路由器背后的 UX 理念是一个登陆页面，一个你希望某人能够导航进出的地方。模式背后的 UX 理念是页面中的中断，需要进行一些过程才能使页面上的逻辑完成或继续。您可能正在构建的是一个向导，一个多步骤模式对话框。为此，我鼓励使用<compose> 并管理这些步骤。

标签： aurelia

【解决方案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>

【讨论】：