如何在 Angular 1.5 组件中使用多槽透入，或者改用啥？

Posted 2023-02-22

【中文标题】如何在 Angular 1.5 组件中使用多槽透入，或者改用啥？

【英文标题】：How to use multiple slot transclution in angular 1.5 component, or what to use instead?如何在 Angular 1.5 组件中使用多槽透入，或者改用什么？

【发布时间】：2016-09-11 14:23:30

【问题描述】：

我正在用 Angular 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 属性是布尔类型的，所以这不起作用。

我的问题是为什么你不能在组件中使用多槽嵌入，当你可以用指令来做的时候，你会推荐我做什么呢？

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

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

【参考方案1】：

我认为这种*** post 总结了您可能希望在此处使用指令而不是组件的原因。你当然可以为你的panel 制作子组件，但是Angular component 没有directive 的高级选项。 （另见：Angular component）