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对象的一个小封装