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

Posted 2023-02-23

【中文标题】在同一组件中多次使用 ng-transclude

【英文标题】：Use ng-transclude more than once in same component

【发布时间】：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，但我没有得到最终的解决方案。我希望它足够清楚，有什么想法吗？

【参考方案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>

现在它工作正常。干杯。