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

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

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

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

@ContentChildren('tabItem') 

Answer 2

最后，我最终得到了君特·佐赫鲍尔(Günter Zöchbauer(从这个答案中发布的略微修改的解决方案： Angular 2 动态选项卡，用户单击所选组件

我已经使用 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 将对象列表注入为选项卡