ng-bootstrap別のタブ内のタブのコンテンツが機能しない（角4）

Question

別のタブのコンテンツの中にたくさんのタブを作成する必要があるという要件があります。タブの中にタブのセットを置くと、それは有線の動作を示します。あなたは、タブの見出しをクリックして、別のタブをクリックしますならば、子タブが表示されませんまで、最初のタブのコンテンツ内のタブは表示されませんplunkerで

<ngb-tabset> 
    <ngb-tab title="Simple"> 
    <ng-template ngbTabContent> 
     <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby 
     sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> 


     <ngb-tabset> 
     <ngb-tab title="tab12"> 
      <ng-template ngbTabContent> 
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. 
       Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> 
      </ng-template> 
     </ngb-tab> 

     <ngb-tab title="tab2 disabled"> 
      <ng-template ngbTabContent> 
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. 
       Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> 
      </ng-template> 
     </ngb-tab> 
     </ngb-tabset> 

    </ng-template> 
    </ngb-tab> 
    <ngb-tab> 
    <ng-template ngbTabTitle><b>Fancy</b> title</ng-template> 
    <ng-template ngbTabContent>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. 
     <p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo 
     nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa 
     terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> 
    </ng-template> 
    </ngb-tab> 
    <ngb-tab title="Disabled" [disabled]="true"> 
    <ng-template ngbTabContent> 
     <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby 
     sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> 
    </ng-template> 
    </ngb-tab> 
</ngb-tabset> 

http://plnkr.co/edit/Nw9utaWLYwmbhQW2OMLb?p=preview

これ以上。

• 角度：4.1.3
• NG-ブートストラップ：1.0.0-alpha.26
• ブートストラップ：4.0.0-alpha.6

Answer 1

私はTemplateRefのようないくつかの事例があると思いますあなたがそれらを直接の子として使用するときにタブで混合されます。

<ngb-tabset> 
    <ngb-tab title="Simple"> 
    <ng-template ngbTabContent> 
     <p>Some content</p> 

    <ng-container *ngTemplateOutlet="innerTabset"></ng-container> 
    </ngb-tab> 
    ... 
</ngb-tabset> 

<ng-template #innerTabset> 
    <ngb-tabset> 
    ... tabs content 
    </ngb-tabset> 
</ng-template> 

Plunker Example

は

• Nesting ng-bootstrap tabs (Angular 2)

も参照してください：私が働いて、それを行うには ngTemplateOutletを使用します