aurelia multiple viewPorts在同一个组件上

Question

是否可以将viewPorts与相同的组件一起使用，而不会将其实例化两次。 E.g。

 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

基本上，它为您提供了一个指定视图/视图模型对（布局）的机会，它将在路由到时代替原始模块。相反，原始内容将使用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 partials或ASP.NET母版页，允许您为某些页面指定替代布局（不需要子路径）。

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