<ngb-tabset> 作为容器元素，其中的每个页签以一个 <ngb-tab> 元素定义，在 <ngb-tabset> 中包含若干个 <ngb-tab> 子元素。
在 <ngb-tab> 元素中，使用 <ng-template> 模板来定义内容，内容分为两种：标题和内容。
标题使用 [ngbTabTitle] 指令来声明，或者在 <ngb-tab> 元素上使用 title 属性声明。
内容使用 [ngbTabContent] 指令声明。
<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> </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>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p> </ng-template> </ngb-tab> </ngb-tabset>
可以看到，外层元素是 <ngb-tabset>。
每个 tab 使用元素 <ngb-tab> 定义，tab 的内容使用 <ng-template> 模板定义， tab 中的内容分为两个部分：标题和内容。
下面是使用模板的标题
<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
标题也可以在 ngb-tab 上使用 [title] 属性定义。例如：
<ngb-tab title="Disabled" [disabled]="true">
内容部分定义，这里使用了指令 [ngbTabContent] 便于识别。
<ng-template ngbTabContent> <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. </p> </ng-template>
TabSet 组件定义
从前面的使用可以看出，所有 tab 的定义都是 ngb-tabset 元素的内容，它们在使用时定义，而不是在 ngb-tabse 自己的模板中定义。
所以找到它们需要使用 ContentChildren 来找到。
@ContentChildren(NgbTab) tabs: QueryList<NgbTab>;
不使用 ContentChild 的原因是它没有提供 descendants 的支持。
在 bootstrap 中，每个页签 实际上渲染成两个部分，一个标题的列表，和当前显示的内容。
标题列表使用一个 ul 来处理。其中使用循环来将所有的标题显示出来。
而 titleTpl 是由模板定义的，所以，使用了 [ngTemplateOutlet] 来渲染出来。
<ul [class]="'nav nav-' + type + (orientation == 'horizontal'? ' ' + justifyClass : ' flex-column')" role="tablist"> <li *ngFor="let tab of tabs"> <a [id]="tab.id" [class.active]="tab.id === activeId" [class.disabled]="tab.disabled" href (click)="select(tab.id); $event.preventDefault()" role="tab" [attr.tabindex]="(tab.disabled ? '-1': undefined)" [attr.aria-controls]="(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)" [attr.aria-selected]="tab.id === activeId" [attr.aria-disabled]="tab.disabled"> {{tab.title}}<ng-template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></ng-template> </a> </li> </ul>
title 部分并列使用了两种来源
{{tab.title}}<ng-template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></ng-template>
内容部分，由于具体内容也是使用模板定义出来，所以这里也是使用 [ngTemplateOutlet] 渲染出来。