在同一组件中多次使用 ng-transclude答案

【问题标题】：Use ng-transclude more than once in same component在同一组件中多次使用 ng-transclude
【发布时间】：2017-06-07 16:58:55
【问题描述】：

我正在构建一个包含标题和内容的容器。我可以通过单击标题来切换容器并显示我的内容。在我的标题中还有一些信息，在每个切换状态中都可见。它看起来像这样：

关闭（只是标题）：

打开（标题和内容）：

我使用角度组件来构建这个：

myContainer.ts：

/** @ngInject */
export class MyContainer extends Controller {
    static componentName = 'myContainer';
    static templateUrl = 'app/comp/components/myContainer/myContainer.html';

    static componentOptions: ng.IComponentOptions = {
        transclude: true,
        bindings: {
            headerTitle: '@'
        }
    };

    headerTitle: string;
    isShownBlock: boolean = false;

    constructor(

    ) {
        super();
    }
}

myContainer.html：

<div class="containerHeader" ng-click="ctrl.isShownBlock = !ctrl.isShownBlock">
    <my-icon icon="arrow-filled"></my-icon>
    <div class="containerTitle">{{ctrl.headerTitle}}</div>
</div>
<div class="containerContent" ng-if="ctrl.isShownBlock">
    <div class="containerInnerContent" ng-transclude>
        <!--TRANSCLUDED_CONTENT-->
    </div>
</div>

在我的代码中使用 myContainer：

<my-container header-title="my container">
    transcluded things
</my-container>

如您所见，我使用binding 设置我的容器标题并使用ng-transclude 嵌入我的内容。现在我想用ng-transclude 设置我的容器标题。我的问题是，我不知道如何区分标题和内容的嵌入内容？我尝试为标题构建一个自己的组件并将其放在<my-container></my-container> 的东西中，并使用ng-transclude，但我没有得到最终的解决方案。我希望它足够清楚，有什么想法吗？

【问题讨论】：

标签： html angularjs components angularjs-ng-transclude

【解决方案1】：

我在此页面上找到了解决方案：https://blog.thoughtram.io/angular/2015/11/16/multiple-transclusion-and-named-slots.html

我可以使用多个ng-transclude-slots。我只需要将transclude: true 更改为object。在这个对象中，我可以将插槽放在它们来自的地方。我现在也可以删除我对标题标题的绑定。所以基本上它看起来像这样：

myContainer.ts： 我已将transclude: true 更改为object，其中有两个插槽用于我的标题和我的内容。我现在也可以删除我的绑定，因为不再需要它了。

/** @ngInject */
export class MyContainer extends Controller {
    static componentName = 'myContainer';
    static templateUrl = 'app/comp/components/myContainer/myContainer.html';

    static componentOptions: any = {
        transclude: {
            headerSlot: 'headerTitle',
            contentSlot: 'contentData'
        }
    };

    isShownBlock: boolean = false;

    constructor(

    ) {
        super();
    }
}

myContainer.html： 在我的模板中，我实现了两个 div，我的 transclude 应该在哪里，并用标题和内容的插槽名称命名它，这样我就可以处理数据应该被嵌入的位置。

<div class="containerHeader" ng-click="ctrl.isShownBlock = !ctrl.isShownBlock">
    <my-icon icon="arrow-filled"></my-icon>
    <div class="containerTitle" ng-transclude="headerSlot"></div>
</div>
<div class="containerContent" ng-if="ctrl.isShownBlock">
    <div class="containerInnerContent" ng-transclude="contentSlot"></div>
</div>

在我的代码中使用 myContainer： 在我的组件标签中，我使用对象的插槽名称实现了两个标签。里面的代码会被嵌入。

<my-container>
    <header-title>Title</header-title>
    <content-data>Content</content-data>
</my-container>

现在它工作正常。干杯。

【讨论】：