<div> <ng-template ngFor let-tab [ngForOf]="tabs"> <div *ngIf="!destroyOnHide || tab.id === activeId" role="tabpanel" [attr.aria-labelledby]="tab.id"> <ng-template [ngTemplateOutlet]="tab.contentTpl?.templateRef"></ng-template> </div> </ng-template> </div>
投影内容需要在 Content 类型的事件中处理。
ngAfterContentChecked() { // auto-correct activeId that might have been set incorrectly as input let activeTab = this._getTabById(this.activeId); this.activeId = activeTab ? activeTab.id : (this.tabs.length ? this.tabs.first.id : null); }
两个指令定义
指令的定义非常简单，就是获取模板的引用，以便后继使用。
可以看到属性名称为 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
总结
以上所述是小编给大家介绍的深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: