Angular 角度2动态标签加载器

我想用angular 2材质创建一个动态标签加载器 是我想要支持的语法

在组件内部，我想使用材质设计渲染选项卡 并将包含tabContent的组件绑定到每个选项卡 这是通用选项卡的模板

{{getDisplayField（i）}
//为此选项卡插入组件

我不知道的是如何选择所有正在使用的组件 在“常规”选项卡内标记并使其具有角度以创建它们

我找到了使用多内容转换的解决方案

@组成部分({
moduleId:module.id，
选择器：“通用选项卡”，
templateUrl:“generic tabs.html”，
封装：视图封装。无，
样式URL：[
“./generic tabs.css”
]
})
导出类GenericAbsComponent实现AfterViewInit{
@Input（）tabHeaders：数组；
@Input（）selectedIndex:number=0；
@输入（）
设置tabErrors（错误：数组）{
for（让e表示错误）{
这是setTabError（e）；
}
}
@输入（）
设置resetErrorIndex（选项卡索引：编号）{
if（tabIndex<0 | | tabIndex>=this.tabErrors.length）{
返回；
}
this.setTabError（{tabIndex，errorColor:，errorIcon:，errorscont:0}）；
}
@ContentChildren（TemplateRef）选项卡ContentTemplateRef:QueryList；
@Output（）onTabChange:EventEmitter=neweventemitter（）；
私有选项卡ContentComponents:Array=[]；
ngAfterViewInit（）{
这是mapTabs（）；
this.tabscontentemplateref.changes.subscribe（this.remapTabs.bind（this））；
}
remapTabs（）{
this.tabsContentComponents=[]；
这是mapTabs（）；
}
地图标签（）{
此.tabsContentTemplateRef.map（t=>{
此.tabs内容组件.push（t）；
});
}
onTabClick（$event）{
this.selectedIndex=$event.index；
this.onTabChange.emit（{$event，selectedTab:this.tabHeaders[this.selectedIndex]，selectedTabIndex:this.selectedIndex}）；
}
私有setTabError（e:ITabError）{
this.tabHeaders[e.tabIndex].ErrorScont=e.ErrorScont；
this.tabHeaders[e.tabIndex].errorsIcon=e.errorIcon；
this.tabHeaders[e.tabIndex].errorsIconColor=e.errorIcon；
}
}

使用此组件，我可以使用选项卡在其视图中呈现特定组件 内容

薪酬类型

这是我到目前为止一直试图做的事情，但如果没有成功的话。在rc-06上，我得到的create EmbeddedView不是一个函数。这是我在rc-0.6上得到的错误，原因与该plunk browser_适配器类似。ts:82原始异常：TypeError:无法读取nullbrowser_适配器的属性“CreateMbeddedView”。ts:82 TypeError:无法读取在处为null的属性“CreateMbeddedView”ViewContainerRef.createEmbeddedView（core.umd.js:8344）在ViewContainerRef.createEmbeddedView（core.umd.js:8344）在DebugAppView的NgTemplateOutlet.ngOnChanges（common.umd.js:1236）在DebugAppView的ViewContainerRef.createEmbeddedView（core.umd.js:8344）在DebugAppView.AppView.detectChanges（core.umd.js:12586）的视图_GenericAbsComponent5.detectChanges内部（GenerictChanges在DebugAppView.detectChanges（core.umd.js:12691）

<generic-tabs [tabs]="tabs" tabVisibleField="name">
            <test-cmp [tabContent] testData="hello"></test-cmp>
            <test-cmp [tabContent] testData="hello from cmp one"></test-cmp>
            <test-cmp [tabContent] testData="hello from cmp 2"></test-cmp></generic-tabs>

<md-tab-group *ngIf="componentsReferences && componentsReferences.length > 0">
    <md-tab *ngFor="let componentRef of componentsReferences; let i=index" (click)="onTabClick($event, i)">
        <template md-tab-label>{{getDisplayField(i)}}</template>

        <template md-tab-content>
            //inject the component for this tab
        </template>
    </md-tab>
</md-tab-group>

<md-tab-group *ngIf="tabsContentComponents" [selectedIndex]="selectedIndex" (selectChange)="onTabClick($event)">
    <md-tab *ngFor="let componentRef of tabsContentComponents; let i=index">
        <template md-tab-label>
            <tab-header [tabHeader]="tabHeaders[i]"> </tab-header>
        </template>        
        <template md-tab-content *ngIf="componentRef">
            <template [ngTemplateOutlet]="componentRef"></template>
        </template>
    </md-tab>
</md-tab-group>

@Component({
    moduleId: module.id,
    selector: 'generic-tabs',
    templateUrl: 'generic-tabs.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: [
        './generic-tabs.css'
    ]
})
export class GenericTabsComponent implements AfterViewInit {
    @Input() tabHeaders: Array<TabHeaderModel>;
    @Input() selectedIndex: number = 0;
    @Input()
    set tabErrors(errors: Array<ITabError>) {
        for (let e of errors) {
            this.setTabError(e);
        }
    }

    @Input()
    set resetErrorIndex(tabIndex: number) {
        if (tabIndex < 0 || tabIndex >= this.tabErrors.length) {
            return;
        }

        this.setTabError({ tabIndex, errorColor: "", errorIcon: "", errorsCount: 0 });
    }

    @ContentChildren(TemplateRef) tabsContentTemplateRef: QueryList<TemplateRef<any>>;
    @Output() onTabChange: EventEmitter<ITabChangeEvent> = new EventEmitter<ITabChangeEvent>();

    private tabsContentComponents: Array<any> = [];

    ngAfterViewInit() {
        this.mapTabs();
        this.tabsContentTemplateRef.changes.subscribe(this.remapTabs.bind(this));
    }

    remapTabs() {
        this.tabsContentComponents = [];
        this.mapTabs();
    }

    mapTabs() {
        this.tabsContentTemplateRef.map(t => {
            this.tabsContentComponents.push(t);
        });
    }

    onTabClick($event) {
        this.selectedIndex = $event.index;
        this.onTabChange.emit({ $event, selectedTab: this.tabHeaders[this.selectedIndex], selectedTabIndex: this.selectedIndex});
    }

    private setTabError(e: ITabError) {
        this.tabHeaders[e.tabIndex].errorsCount = e.errorsCount;
        this.tabHeaders[e.tabIndex].errorsIcon = e.errorIcon;
        this.tabHeaders[e.tabIndex].errorsIconColor = e.errorIcon;
    }
}

<generic-tabs *ngIf="selectedItem && formRef && formRef.editMode" [tabHeaders]="tabHeaders" (onTabChange)="log($event)">
                <template>
                    <data-grid>
                    </data-grid>
                </template>
                <template>
                    Pay Types
                </template>
                <template>
                    <shift-calendar></shift-calendar>
                </template>
                <template>
                    <holiday-calendar></holiday-calendar>
                </template>
            </generic-tabs>