Angular 2 动态标签加载器

Question

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

<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>

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

<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>

我不知道如何选择所有组件 在generic-tabs标签内并制作角度来创建它们

Answer 1

我找到了使用多个内容嵌入的解决方案

<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>