Angular 没有 NameService 的提供者

问题描述

我在将类加载到 Angular 组件中时遇到问题.我已经尝试解决它很长时间了；我什至尝试将其全部加入一个文件中.我有的是:

I've got a problem loading a class into an Angular component. I've been trying to solve it for a long time; I've even tried joining it all in a single file. What I have is:

Application.ts

/// <reference path="../typings/angular2/angular2.d.ts" />

import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";

@Component({
    selector:'my-app',
    injectables: [NameService]
})
@View({
    template:'<h1>Hi {{name}}</h1>' +
    '<p>Friends</p>' +
    '<ul>' +
    '   <li *ng-for="#name of names">{{name}}</li>' +
    '</ul>',
    directives:[NgFor]
})

class MyAppComponent
{
    name:string;
    names:Array<string>;

    constructor(nameService:NameService)
    {
        this.name = 'Michal';
        this.names = nameService.getNames();
    }
}
bootstrap(MyAppComponent);

services/NameService.ts

export class NameService {
    names: Array<string>;
    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
    getNames()
    {
        return this.names;
    }
}

我不断收到一条错误消息，指出没有 NameService 的提供者.

I keep getting an error message saying No provider for NameService.

有人可以帮我找出代码的问题吗?

Can someone help me spot the issue with my code?

推荐答案

你必须使用 providers 而不是 injectables

You have to use providers instead of injectables

@Component({
    selector: 'my-app',
    providers: [NameService]
})

完整代码示例在此.

这篇关于Angular 没有 NameService 的提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！