同じコンポーネントに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：私のコードでmyContainerを使用して

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

：

<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に変更するだけです。このオブジェクトでは、彼らはどこから来たのか私のスロットを置くことができます。私は今私のヘッダータイトルのために私の綴りを削除することができます。だから、basiclyそれは次のようになります。

myContainer.ts： 私は私のヘッダーと私のコンテンツ用の2つのスロットをobjectに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：私のテンプレートで 私は私のtranscludeが可能とタイトルやコンテンツのためのスロットの名前で命名すべき2つのdivのを、実施し、そのデータがあるべき場所私が扱うことができます絡み合った。私のコードで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> 

： 私のコンポーネントタグには、私は、オブジェクトのスロット名を持つ2個のタグを実装しました。コード内にコードが挿入されます。

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

これで正常に動作します。乾杯。