如何实现带插槽的 switcher/viewstack 组件？

Question

我正在尝试在 Aurelia 中实现 'switcher' 或 'viewstack' 组件，这对于向导、分页内容和单步执行任务列表很有用。这将一次显示来自多个可能的子组件的单个子组件。我希望使用标记类似于：

<my-switcher>
    <one-component></one-component>
    <two-component></two-component>
    <three-component></three-component>
</my-switcher>

现在，这里明显的替代方案是：

<compose view-model.bind="currentStep"> 并一次将 currentStep 变量指向每个组件。（+ves：组件仅在访问时实例化，-ves：需要知道每个组件的路径，所有子组件都需要是有效的视图模型）
在slot中的每个组件的定义中添加一个if.bind='active'，并从my-switcherclass中设置这个active成员。（+ves：更容易理解，-ves：需要专门编写组件才能在这里使用）。
通过@children 检索子元素（如果这现在可以可靠地工作？）并手动将元素添加为子 DOM 元素，然后调用 ViewCompiler.enhance。（-ves：似乎无法让@children 工作，大量自定义代码）

这些中的每一个都感觉有点人为的解决方案。有没有人知道是否有更简洁的方法 could/should 可以代替使用？

Answer 1

结合选项 2 和 3，同时避免负面影响（不知道为什么你不能让@children 工作）。

consumer.html

<my-switcher>
    <my-switcher-item>
        <one-component></one-component>
    </my-switcher-item>
    <my-switcher-item>
        <two-component></two-component>
    </my-switcher-item>
    <my-switcher-item>
        <three-component></three-component>
    </my-switcher-item>
</my-switcher>

我的切换器-item.js

export class MySwitcherItem {
    constructor() {
        this.isActive = false;
    }
}

我的切换器-item.html

<template show.bind="isActive">
    <slot></slot>
</template>

我的-switcher.js

import {children} from 'aurelia-framework';

export class MySwitcher {
    @children('my-switcher-item') items = [];

    // Here you have access to this.items[index].isActive.

    // You can set this value to true or false from this class
    // and make sure only one item's isActive is true.

    // You could add next() and previous() methods to move between
    // the items, etc.
}

如何实现带插槽的 switcher/viewstack 组件？

How to implement a switcher/viewstack component with slot?

aurelia

aurelia-templating