Html 在同一组件中多次使用ng transclude

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

仅关闭标题内容：

打开的标题和内容：

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

myContainer.ts：

myContainer.html：

在我的代码中使用myContainer：

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

---

如您所见，我正在使用绑定来设置容器标题，并使用ng transclude转换内容内容。现在我想用ng transclude设置我的容器标题。我的问题是，我不知道如何区分我的标题和内容中隐藏的内容？我试图为标题构建一个自己的组件，并将其放在stuff中，还使用了ng transclude，但没有得到最终的解决方案。我希望它足够清晰，有什么想法吗？

我在这页上找到了一个解决方案：

我可以使用多个ng收发器插槽。我只需要改变transclude：对一个对象为true。在这个对象中，我可以将插槽放在它们来自的位置。我现在也可以删除标题的绑定。所以基本上看起来是这样的：

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

/** @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应该是，并用标题和内容的槽的名称命名它，这样我就可以处理数据应该在哪里被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>

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

在我的代码中使用myContainer： 在我的组件标记中，我用我的对象的插槽名称实现了两个标记。其中的代码将被排除

<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>

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

现在它工作得很好。干杯