Угловой 2 компонент экспорта в шаблон

Question

Я хочу создать пользовательский компонент вкладок, который сможет отображать содержимое [root] внутри себя. Он отлично работает, когда я использую селектора в тегах html (<tab1>), но я не всегда знаю, что будет с селектором. Вкладки в основном компоненты, так что я нужен способ визуализации компоненты к представлению

Моего Tab.ts, который должен отображать корневой компонент внутри видового экрана

@Component({ 
    selector: 'tab', 
    template: 
    `<div [hidden]="!active"> 
      <ng-content></ng-content> 
    </div>` 
}) 
export class Tab { 
    @Input('tabTitle') title: string; 
    @Input() active = false; 
    @Input('root') root: any; 
} 

Тогда вот Tabs.ts, который склеивает вкладку вместе (позволяет переключаться между ними)

@Component({ 
    selector: 'tabs', 
    template: 
     `<div class="tabbar"> 
     <div class="tab-button" *ngFor="let tab of tabs" (click)="selectTab(tab)"> 
      <a href="#">{{tab.title}}</a> 
     </div> 
     </div> 

     <ng-content></ng-content>` 
}) 

export class Tabs implements AfterContentInit { 
    @ContentChildren(Tab) tabs: QueryList<Tab>; 

    ngAfterContentInit() { 
    let activeTabs = this.tabs.filter((tab) => tab.active); 
    if (activeTabs.length === 0) { 
     this.selectTab(this.tabs.first); 
    } 
    } 

    selectTab(tab: Tab) { 
    this.tabs.forEach(tab => tab.active = false); 
    tab.active = true; 
    if (this.menu) { 
     this.menu.active = false; 
    } 
    } 
} 

Тогда у меня есть этот шаблон, который должен позволить мне использовать вкладки и работает во всех случаях

<tabs> 
    <tab tabTitle="Tab 1"> 
    <tab-home></tab-home> 
    </tab> 
    <tab tabTitle="Tab 2"> 
    <tab-second></tab-second> 
    </tab> 
    <tab tabTitle="Tab 3"> 
    Tab 3 content 
    </tab> 
</tabs> 

Но в конце концов, я хотел бы быть в состоянии делать это сделать так:

<tabs> 
    <tab *ngFor="let tab of tabs" [title]="tab.title">  
    {{ tab.component }} 
    </tab> 
</tabs> 

Вместо tab.component мне нужно, чтобы показать обработанный вид компонента, но без селектора не похож на работу ,

Так что я нужен способ, чтобы придать вынесенное вид из компонента в шаблон без директивы (как я никогда не знаю, что директива будет)

Answer 1

в конце я в конечном итоге со слегка модифицированный раствором публикуемого от Günter Zöchbauer от этого ответа: Angular 2 dynamic tabs with user-click chosen components

Я использовал решение wapsee для получения тега html в машинописном тексте, но я использовал @ViewChild, поскольку у меня есть его внутри шаблона компонента.

Я только изменил код для Tab.ts который теперь выглядит следующим образом:

@Component 
    selector: `tab`, 
    template: 
    `<div [hidden]="!active"> 
     <div #viewport></div> 
     <div class="nav-decor"></div> 
    </div>` 
}) 
export class Tab { 
    @Input('tabTitle') title: string; 
    @Input() active = false; 
    @Input('tabIcon') icon: string; 
    @Input() root: Type<Component> = DefaultTabComponent; 

    componentRef: ComponentRef<Component>; 
    @ViewChild('viewport', {read: ViewContainerRef}) target: ViewContainerRef; 

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {} 

    ngAfterViewInit() { 
    let factory = this.componentFactoryResolver.resolveComponentFactory(this.root); 
    this.componentRef = this.target.createComponent(factory); 
    } 
} 

И теперь я, наконец, смог придать список объектов закладок с помощью * ngFor

Answer 2

Вы можете использовать локальную переменную вместо директивы для @ContentChildren

<some-component #tabItem></some-component> 

Затем передать имя переменной ContentChildren как строка:

@ContentChildren('tabItem')