Question

我的目标是为Angular2创建一个通用标签组件，如下所示：

<tabs>
   <tab tabTitle="Tab 1">This is tab 1 content</tab>
   <tab tabTitle="Tab 2">This is tab 2 content</tab>
</tabs>

然而，当我基于此excellent example实现此组件时，我收到此错误：

TypeError: Cannot set property 'active' of undefined

原因可能是@ContentChildren(Tab) tabs: QueryList<Tab>;无法解析<tab>标记之间定义的<tabs>标记。这使tabs没有任何子项，因此没有任何标签设置为活动状态。

plunkr

上提供了一个实时示例

的index.html

<tabscontainer></tabscontainer>

TabsContainer.ts

import {Tabs} from './Tabs';
import {Tab} from './Tab';

@Component({
  selector: 'tabscontainer',
  template: `
    <tabs>
      <tab tabTitle="Tab 1">This is tab 1 content</tab>
      <tab tabTitle="Tab 2">This is tab 2 content</tab>
    </tabs>
  `,
  directives: [Tabs, Tab]
})
export class TabsContainer {
  constructor() { }
}

Tab.ts

import { Component, Input, Injectable } from 'angular2/core';

@Component({
  selector: 'tab',
  template: `
    <div [hidden]="!active">
      <ng-content></ng-content>
    </div>
  `
})

@Injectable()
export class Tab {
  @Input('tabTitle') title: string;
  @Input() active = false;
}

Answer 1

更改

  selectTab(tab: Tab) {
    // deactivate all tabs
    this.tabs.toArray().forEach(tab => tab.active = false);

    // activate the tab the user has clicked on.
    tab.active = true;
  }

到

  selectTab(tab: Tab) {
    // deactivate all tabs
    this.tabs.toArray().forEach(tab => tab.active = false);

    // activate the tab the user has clicked on.
    if(tab) {
      tab.active = true;
    }
  }

修正了错误消息我还不知道为什么selectTab(...)使用标签进行调用，然后再次没有任何标签 - 这是tab.active trhows，因为tab是null。

你有

<tabs>
  <tab>Tab 1</tab>
  <tab>Tab 2</tab>
</tabs>

在index.html中。根组件不支持<ng-content>。您应该将整个应用程序包装在一个应用程序组件中，并将选项卡放在那里。

Ng内容未针对降级的角度2分量

1 个答案: