同一个组件上的多个viewPorts

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 1-模块被实例化并附加两次。我要避开它。

Answer 1

听起来你想要使用布局功能，这将出现在一个稍后的版本(我不知道什么时候，但公关最近已经合并)。

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

本质上，它使您有机会指定一个视图/视图模型对(一个布局)，它将在路由到原始模块时取代原来的模块。相反，将使用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母版页，并允许您为某些页面指定另一种布局(不需要子路由)。

它与视图非常不同(它也适用于视图，因为您也可以为一个视图指定布局)