Question

我想创建自定义Tabs组件，它能够在自身内部显示[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

您可以使用局部变量而不是@ContentChildren

的指令

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

然后将变量名称作为字符串传递给ContentChildren：

@ContentChildren('tabItem')

Answer 2

最后，我结束了GünterZöchbauer从这个答案中发布的略微修改过的解决方案：Angular 2 dynamic tabs with user-click chosen components

我已经使用wapsee的解决方案将html标签添加到typescript中，但我使用@ViewChild，因为我在组件模板中使用它。

我只修改了Tab.ts的代码，现在看起来像这样：

{{1}}

现在我终于能够使用* ngFor

将对象列表注入选项卡

Angular 2导出组件到模板中

2 个答案: