Aurelia 命名为 router-view / viewPorts 不工作答案

【问题标题】：Aurelia named router-view / viewPorts not workingAurelia 命名为 router-view / viewPorts 不工作
【发布时间】：2019-01-11 08:55:10
【问题描述】：

我无法使用我在路由配置中指定的视口正确填充布局视图。我有一个路由“styleguide”，它应该使用“sidebar”布局，用“sidebar.html”填充“sidebar”路由器视图，用“content.ts / html”填充“content”路由器视图

app.ts

export class App {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.map([{ 
      route: "styleguide", 
      name: "styleguide", 
      layoutView: "layout/sidebar.html",
      viewPorts: {
        sidebar: { moduleId: "styleguide/sidebar.html" },
        content: { moduleId: "styleguide/index" },
      }
    }]);
  }
}

app.html

<template>
  <router-view layout-view="layout/default.html"></router-view>
</template>

layout/default.html（本例中未使用）

<template>
    <router-view></router-view>
</template>

layout/sidebar.html

<template>
    <router-view name="sidebar"></router-view>
    <router-view name="content"></router-view>
</template>

styleguide/sidebar.html

<template>
  SIDEBAR!!
</template>

styleguide/index.ts

export class Index { }

styleguide/index.html

<template>
  CONTENT
</template>

问题：

“在 styleguide/sidebar.html 的视图中找不到路由器视图。” -- 虽然我已经指定了路由器视图名称等。
我确实有另一个路由没有指定layoutView，因此使用默认值。这仅在我将 layout/default.html 中的 router-view 元素替换为 slot 时才有效。我尝试在两种布局中使用插槽，但侧边栏布局给了我同样的错误。

【问题讨论】：

如何用不同的关闭标签关闭？我认为插槽有不同的开放标签。请查看此文档aurelia.io/docs/routing/configuration#layouts
打错字了——谢谢。
另外，我已经阅读了该文件和其他相关文件，我觉得这应该按照我所阅读的内容进行。

标签： javascript aurelia

【解决方案1】：

你得到的错误是因为你的app.html 不支持viewPorts。默认名称只有一个<router-view/>，因此您的路由配置有2个视口，它失败并出现上述错误。

根据文档，布局似乎是一种为您的路线实现类似槽的行为的方法，而不是向我放置 <router-view/> 的地方。

【讨论】：