Question

使用Angular 2并尝试使这个简单的代码正常工作。但我一直收到错误：

EXCEPTION：无法解析Tab的所有参数（未定义）。确保它们都有有效的类型或注释。

到目前为止，ng2没有在c onstructor(tabs:Tabs) {…中注入构造函数

以下是整个代码：

///<reference path="../../typings/zone.js/zone.js.d.ts"/>

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

@Component({
    selector: 'tab',
    template: `
    <ul>
      <li *ngFor="#tab of tabs" (click)="selectTab(tab)">
        {{tab.tabTitle}}
      </li>
    </ul>
    <ng-content></ng-content>
  `,
})
export class Tab {
    @Input() tabTitle: string;
    public active:boolean;
    constructor(tabs:Tabs) {
        this.active = false;
        tabs.addTab(this);
    }
}

@Component({
    selector: 'tabs',
    directives: [Tab],
    template: `
    <tab tabTitle="Tab 1">
        Here's some content.
    </tab>
  `,
})

export class Tabs {
    tabs: Tab[] = [];
    selectTab(tab: Tab) {
        this.tabs.forEach((myTab) => {
            myTab.active = false;
        });
        tab.active = true;
    }

    addTab(tab: Tab) {
        if (this.tabs.length === 0) {
            tab.active = true;
        }
        this.tabs.push(tab);
    }
}

TX

肖恩

Answer 1

这是因为您的Tabs课程是在Tab课程和classes in javascript aren't hoisted之后定义的。

所以你必须使用forwardRef来引用一个尚未定义的类。

export class Tab {
    @Input() tabTitle: string;
    public active:boolean;
    constructor(@Inject(forwardRef(() => Tabs)) tabs:Tabs) {
        this.active = false;
        tabs.addTab(this);
    }
}

Answer 2

您有两种解决方案：在bootstrap全局注入Tabs类：

bootstrap(MainCmp, [ROUTER_PROVIDERS, Tabs]);

使用绑定属性在本地注入Tabs

@Component({
    selector: 'tab',
    bindings: [Tabs],   // injected here
    template: `
    <ul>
      <li *ngFor="#tab of tabs" (click)="selectTab(tab)">
    [...]

角度2错误：

2 个答案: