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


Posted in Javascript onJuly 19, 2019

ng-bootstrap: tabset

 本文介绍了 ng-bootstrap 项目中,tabset 的实现分析。

使用方式

<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 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 ? '-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] 渲染出来。

<div class="tab-content">
 <ng-template ngFor let-tab [ngForOf]="tabs">
  <div
   class="tab-pane {{tab.id === activeId ? 'active' : null}}"
   *ngIf="!destroyOnHide || tab.id === activeId"
   role="tabpanel"
   [attr.aria-labelledby]="tab.id" id="{{tab.id}}-panel">
   <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

•tabset

总结

以上所述是小编给大家介绍的深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
cookie的secure属性详解
Apr 08 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
bootstrap table插件动态加载表头
Jul 19 #Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 #Javascript
VueJS 取得 URL 参数值的方法
Jul 19 #Javascript
vue自定义表单生成器form-create使用详解
Jul 19 #Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 #Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 #Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 #Javascript
You might like
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php伪静态之APACHE篇
2014/06/02 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
js倒计时抢购实例
2015/12/20 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
Python实现SMTP发送邮件详细教程
2021/03/02 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
2014年党员个人剖析材料
2014/10/08 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
贷款收入证明范本
2015/06/12 职场文书
公司开业致辞
2015/07/29 职场文书
资产移交协议书
2016/03/24 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL
python中的sys模块和os模块
2022/03/20 Python