深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析

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

<ng-template ngbTabTitle><b>Fancy</b> title</ng-template>

<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. 
 </p>
</ng-template>

<ul [class]="'nav nav-' + type + (orientation == 'horizontal'" role="tablist">
 <li class="nav-item" *ngFor="let tab of tabs">
  <a [id]="tab.id" class="nav-link" 
   [class.active]="tab.id === activeId" 
   [class.disabled]="tab.disabled"
   href (click)="select(tab.id); $event.preventDefault()" 
   role="tab" 
   [attr.tabindex]="(tab.disabled "
   [attr.aria-controls]="(!destroyOnHide || tab.id === activeId "
   [attr.aria-selected]="tab.id === activeId" [attr.aria-disabled]="tab.disabled">
   {{tab.title}}<ng-template [ngTemplateOutlet]="tab.titleTpl"></ng-template>
  </a>
 </li>
</ul>

{{tab.title}}<ng-template [ngTemplateOutlet]="tab.titleTpl"></ng-template>

<div class="tab-content">
 <ng-template ngFor let-tab [ngForOf]="tabs">
  <div
   class="tab-pane {{tab.id === activeId "
   *ngIf="!destroyOnHide || tab.id === activeId"
   role="tabpanel"
   [attr.aria-labelledby]="tab.id" id="{{tab.id}}-panel">
   <ng-template [ngTemplateOutlet]="tab.contentTpl"></ng-template>
  </div>
 </ng-template>
</div>

ngAfterContentChecked() {
 // auto-correct activeId that might have been set incorrectly as input
 let activeTab = this._getTabById(this.activeId);
 this.activeId = 
  activeTab "color: #ff0000">两个指令定义

指令的定义非常简单，就是获取模板的引用，以便后继使用。
可以看到属性名称为 templateRef


@Directive({selector: 'ng-template[ngbTabTitle]'})
export class NgbTabTitle {
 constructor(public templateRef: TemplateRef<any>) {}
}


这是 [ngbTabContent] 的定义，与上面相同，依然是定义了属性 templateRef。


@Directive({selector: 'ng-template[ngbTabContent]'})
export class NgbTabContent {
 constructor(public templateRef: TemplateRef<any>) {}
}


Tab 定义
元素型的指令，所以连模板都没有了。


@Directive({selector: 'ngb-tab'})


内容是投影进来的。
由于在 tab 中使用了模板，并且使用指令来标识出来，它们定义在组件的模板之内，所以这里使用了 ContentChildren 来识别。


@ContentChildren(NgbTabTitle, {descendants: false}) titleTpls: QueryList<NgbTabTitle>;
@ContentChildren(NgbTabContent, {descendants: false}) contentTpls: QueryList<NgbTabContent>


以后就可以使用 titleTpls 和 contentTpls 来使用模板了。
由于是内容，需要在 content 的事件中处理，实际上，在每个页签中，我们只有一个标题和一个内容的声明。


ngAfterContentChecked() {
 // We are using @ContentChildren instead of @ContentChild as in the Angular version being used
 // only @ContentChildren allows us to specify the {descendants: false} option.
 // Without {descendants: false} we are hitting bugs described in:
 // https://github.com/ng-bootstrap/ng-bootstrap/issues/2240
 this.titleTpl = this.titleTpls.first;
 this.contentTpl = this.contentTpls.first;
}


See also
"_blank" href="https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/tabset/tabset.ts">tabset
总结
以上所述是小编给大家介绍的深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！