Question

我有一个Angular2组件，其构造函数需要注入KeyValueService。这是为了“修补”路由上缺少data的新路由器。

KeyValueService

import {Injectable} from '@angular/core';

@Injectable()
export class KeyValueService {
    private KeyValues: Array<KeyValue>;

    constructor() { }

    Set(key, value) {
        ...
    }
    Get(key): any {
        ...
    }
}

export class KeyValue {
    Key;
    Value;

    constructor(key, value) {
        this.Key = key;
        this.Value = value;
    }
}

根组件

import {Component} from '@angular/core';
import {Child} from './Child';

@Routes([
    { path: '/Child', component: Child}
])
@Component({
    providers: [
        ROUTER_PROVIDERS
    ],
    directives: [ROUTER_DIRECTIVES],
    selector: 'Root',
    template: 
        '<div>
            <router-outlet></router-outlet>
            <a [routerLink]="['/Child']">Child</a>
        </div>'
})
export class Root {
}

儿童

import {Component} from '@angular/core';
import {KeyValueService} from './KeyValueService';

@Component({
    providers: [KeyValueService],
    selector: 'Child',
    template: 
        '<div>
            Child!!
        </div>'
})
export class Child {
    constructor(keyValue: KeyValueService) {

    }
}

我收到的错误说明keyValueService没有提供商。如果KeyValueService提供程序位于根组件，它可以正常工作，但如果我定义了实际需要的提供程序，它将无法正常工作。为什么？它已被定义为Child组件的提供者。

Answer 1

你应该把＆＃39;，＆＃39;在providers: [KeyValueService]之后像这样：

import {Component} from '@angular/core';
import {KeyValueService} from './KeyValueService';

@Component({
    providers: [KeyValueService],
    selector: 'Child',
    template: 
        '<div>
         Child!!
         </div>'
})
export class Child {
    constructor(keyValue: KeyValueService) {

    }
}

Answer 2

Visual Studio没有覆盖.js输出中生成的tsc个文件。没有抛出任何错误，所以从来没有想过它为什么会发生，但是在手动删除生成的.js文件后它开始正常工作。

Angular2 rc1，组件提供程序仅在根组件定义时才有效

2 个答案: