aurelia 同一组件上的多个视口

Question

是否可以将 viewPorts 与同一组件一起使用，而无需将其实例化两次。例如

 config.map([
        {
            route: 'route1',
            name: 'route1',
            viewPorts: {
                default: {moduleId: './route1-module'},
                heading: {moduleId: './route1-module', view: './route1-module-heading.html'}
            },
            nav: true,
            title: 'Route1'

        }]);

route1-module 被实例化并附加了两次。我需要避免它。

Answer 1

听起来你想使用将在以后的版本中出现的布局功能（我不确定什么时候但是最近已经合并了 PR）。

PR 在这里：https://github.com/aurelia/templating-router/pull/25

本质上，它让您有机会指定一个 view/viewmodel 对（一个布局），它们将在路由到时代替原始模块。相反，原始内容将使用 slots.

投影到布局中

示例：

路由配置

config.map([
    { layoutView: "layout.html", moduleId: 'page1' }
]);

page1.html

<template>
    <div slot="slot1">some content</div>
    <div slot="slot2">some other content</div>
</template>

layout.html

<template>
    <div class="some-fancy-container">
        <p>This is slot 2</p>
        <!-- slot2 content will be projected here -->
        <slot name="slot2">some fallback content</slot>
    </div>
    <div class="sidebar">
        <p>This is slot 1</p>
        <!-- slot1 content will be projected here -->
        <slot name="slot1">some fallback content</slot>
    </div>
</template>

结果 HTML 输出：

<template>
    <div class="some-fancy-container">
        <p>This is slot 2</p>
        some other content
    </div>
    <div class="sidebar">
        <p>This is slot 1</p>
        some content
    </div>
</template>

这类似于 MVC 部分或 ASP.NET 母版页，允许您为某些页面指定替代布局（不需要子路由）。

它与视口截然不同（它也适用于视口，因为您也可以为视口指定布局）

aurelia 同一组件上的多个视口

aurelia multiple viewPorts on the same component

router

viewport

aurelia