网站开发网络公司兼职,青岛房产网新楼盘,网站毕业设计答辩问题,劳务公司简介模板ng-bootstrap: tabset 本文介绍了 ng-bootstrap 项目中#xff0c;tabset 的实现分析。 使用方式 ngb-tabset 作为容器元素#xff0c;其中的每个页签以一个 ngb-tab 元素定义#xff0c;在 ngb-tabset 中包含若干个 ngb-tab 子元素。 在 tabset 的实现分析。 使用方式 ngb-tabset 作为容器元素其中的每个页签以一个 ngb-tab 元素定义在 ngb-tabset 中包含若干个 ngb-tab 子元素。 在 ngb-tab 元素中使用 ng-template 模板来定义内容内容分为两种标题和内容。 标题使用 [ngbTabTitle] 指令来声明或者在 ngb-tab 元素上使用 title 属性声明。 内容使用 [ngbTabContent] 指令声明。 ngb-tabsetngb-tab titleSimpleng-template ngbTabContentpRaw denim you probably havent heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synthmaster cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyehdreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillumiphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui./p/ng-template/ngb-tabngb-tabng-template ngbTabTitlebFancy/b title/ng-templateng-template ngbTabContentFood truck fixie locavore, accusamus mcsweeneys marfa nulla single-origin coffee squid.pExercitation 1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-tablecraft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinylcillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salviayr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jeanshorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher verosint qui sapiente accusamus tattooed echo park./p/ng-template/ngb-tabngb-tab titleDisabled [disabled]trueng-template ngbTabContentpSed 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 ngbTabTitlebFancy/b title/ng-template 标题也可以在 ngb-tab 上使用 [title] 属性定义。例如 ngb-tab titleDisabled [disabled]true 内容部分定义这里使用了指令 [ngbTabContent] 便于识别。 ng-template ngbTabContentpSed 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: QueryListNgbTab; 不使用 ContentChild 的原因是它没有提供 descendants 的支持。 在 bootstrap 中每个页签 实际上渲染成两个部分一个标题的列表和当前显示的内容。 标题列表使用一个 ul 来处理。其中使用循环来将所有的标题显示出来。 而 titleTpl 是由模板定义的所以使用了 [ngTemplateOutlet] 来渲染出来。 ul [class]nav nav- type (orientation horizontal? justifyClass : flex-column) roletablistli classnav-item *ngForlet tab of tabsa [id]tab.id classnav-link [class.active]tab.id activeId [class.disabled]tab.disabledhref (click)select(tab.id); $event.preventDefault() roletab [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 classtab-contentng-template ngFor let-tab [ngForOf]tabsdivclasstab-pane {{tab.id activeId ? active : null}}*ngIf!destroyOnHide || tab.id activeIdroletabpanel[attr.aria-labelledby]tab.id id{{tab.id}}-panelng-template [ngTemplateOutlet]tab.contentTpl?.templateRef/ng-template/div/ng-template
/div 投影内容需要在 Content 类型的事件中处理。 ngAfterContentChecked() {// auto-correct activeId that might have been set incorrectly as inputlet 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: TemplateRefany) {}
} 这是 [ngbTabContent] 的定义与上面相同依然是定义了属性 templateRef。 Directive({selector: ng-template[ngbTabContent]})
export class NgbTabContent {constructor(public templateRef: TemplateRefany) {}
} Tab 定义 元素型的指令所以连模板都没有了。 Directive({selector: ngb-tab}) 内容是投影进来的。 由于在 tab 中使用了模板并且使用指令来标识出来它们定义在组件的模板之内所以这里使用了 ContentChildren 来识别。 ContentChildren(NgbTabTitle, {descendants: false}) titleTpls: QueryListNgbTabTitle;
ContentChildren(NgbTabContent, {descendants: false}) contentTpls: QueryListNgbTabContent 以后就可以使用 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/2240this.titleTpl this.titleTpls.first;this.contentTpl this.contentTpls.first;
} See also tabset 转载于:https://www.cnblogs.com/haogj/p/11210861.html
