Используйте ng-transclude более одного раза в одном компоненте

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: В моем шаблоне я реализовал два Див, где мой 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> 

Теперь он отлично работает. Приветствия.