Question

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

关闭（只是标题内容）：

打开（标题和内容）：

我使用了角度组件来构建它：

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但我没有得到最终解决方案。我希望它清楚，有什么想法吗？

Answer 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： 在我的组件标记中，我使用对象的slot-name实现了两个标记。其中的代码将被转换。

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

现在它运作正常。欢呼声。

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

1 个答案: