ngx-bootstrap解析（一）

TAB

tab插件一共7个文件

文件名 价格 index.ts 用于组件引用 ng-transclude.directive 自封装的嵌入指令 tab.directive $1 tab-heading.directive $1600 tabs.module 用于模块引用 tabset.component $1600 tabset.config 组件内公共参数设置

ng-transclude.directive

import {  Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';@Directive({  selector: '[ngTransclude]'})export class NgTranscludeDirective {  public viewRef:ViewContainerRef;  protected _viewRef:ViewContainerRef;  protected _ngTransclude:TemplateRef<any>;  @Input()  public set ngTransclude(templateRef:TemplateRef<any>) {    this._ngTransclude = templateRef;    if (templateRef) {      this.viewRef.createEmbeddedView(templateRef);    }  }  public get ngTransclude():TemplateRef<any> {    return this._ngTransclude;  }  public constructor(viewRef:ViewContainerRef) {    this.viewRef = viewRef;  }}

上述代码用到了TemplateRef和ViewContainerRef，关于这两个的具体用法，请看这篇文章
文章写得有些晦涩 不过用起来是比较简单的，我们只需要知道：
this.ViewContainerRef.createEmbeddedView(this.TemplateRef);
即：利用TemplateRef得到ag的模板文件里面的元素，然后放到ViewContainerRef容器中使用

这个指令的目的是：创建时传入一个viewcontainer容器，用的时候，可以将容器传入或取出一个templateRef对象，总的来说，就是对传入template对象的一个小封装