Question

我在角度1.5中构建一个面板组件，并希望将一些标记转换为此模板（简化）：

    <div class="panel">
        <h1>{{ $ctrl.title }}</h1>

        <div ng-transclude="menu"></div>
        <div ng-transclude="form" ng-if="$ctrl.formExpanded"></div>
        <div ng-transclude="content"></div>
    </div>

然后在组件中出现类似的内容：

    export const panelComponentOptions: angular.IComponentOptions = {
        transclude: {
          'menu': '?panelMenu',
          'form': '?panelForm',
          'content': '?panelContent',
        },
        templateUrl: "panel.html",
        controller: PanelController,
        bindings: {
            title: "@?"
        }
    }

但angular.IComponentOptions的transclude属性是boolean类型，所以这不会起作用。

我的问题是，为什么你不能在组件中使用多时隙转换，当你可以使用指令时，你会建议我做什么呢？

我真的需要制作菜单和表单的单独组件吗？像这样：

<panel>
    <panel-menu></panel-menu>
    <panel-form></panel-form>
    <div>
        My content
    </div>
</panel>

Answer 1

我认为这种StackOverflow post总结了为什么你可能想要在这里使用指令而不是任何组件的原因。您当然可以为panel制作子组件，但Angular component只有directive没有的高级选项。（另见：Angular component）

如何在角1.5组件中使用多槽转换，或者使用什么？

1 个答案: