Question

我有这个Aurelia项目，我有2个布局。我的主要布局如下：

<template>
  <div class="row">
    <div class="col-md-4">
      <slot name="aside-content"></slot>
    </div>
    <div class="col-md-8">
      <slot name="main-content"></slot>
    </div>
  </div>
</template>

在X模块上我有这个：

<template>
  <require from="./client-list"></require>

  <div slot="main-content">
    <div class="no-selection text-center">
      <h2>${message}</h2>
    </div>
  </div>
  <div slot="aside-content">
    <div class="row">
      <client-list class="col-md-12"></client-list>
    </div>
  </div>
</template>

Aurelia正在替换相应占位符上的内容，但它也正在替换其div父元素，从而破坏了整个设计。

我得到router-view > div#main-content + div#aside-content之类的内容，预期结果为router-view > ( div.col-md-4 > div#aside-content ) + ( div.col-md-8 > div#main-content )

我不知道这是预期的行为，还是我做错了什么。

Answer 1

您应该使用<router-view layout-view="default.html"></router-view>指定布局视图。

请参阅此示例https://gist.run/?id=a75d76272316ca25513802bda8d225d1

Aurelia布局正在取代其父元素

1 个答案: