[typescript] NameService에 대한 각도 없음 공급자

Program / 글쓴이

클래스를 Angular 구성 요소에로드하는 데 문제가 있습니다. 나는 오랫동안 그것을 해결하려고 노력했다. 나는 심지어 하나의 파일로 모두 결합하려고 시도했습니다. 내가 가진 것은 :

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;
    }
}

라는 오류 메시지가 계속 나타납니다 No provider for NameService.

누군가 내 코드에서 문제를 발견하도록 도울 수 있습니까?

답변

providers대신에 사용해야 합니다injectables

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

여기에서 코드 샘플을 완성하십시오 .

답변

Angular 2에는 서비스를 “제공”할 수있는 세 곳이 있습니다.

  1. 부트 스트랩
  2. 루트 컴포넌트
  3. 다른 구성 요소 또는 지침

“부트 스트랩 공급자 옵션은 라우팅 지원과 같은 Angular의 사전 등록 된 서비스를 구성하고 재정의하기위한 것입니다.” – 참조

전체 앱 (예 : Singleton)에서 NameService 인스턴스를 하나만 원하는 경우 providers루트 구성 요소 의 배열에 포함하십시오.

@Component({
   providers: [NameService],
   ...
)}
export class AppComponent { ... }

Plunker

구성 요소 당 하나의 인스턴스를 원한다면 providers구성 요소의 구성 객체에서 배열을 대신 사용하십시오.

@Component({
   providers: [NameService],
   ...
)}
export class SomeOtherComponentOrDirective { ... }

자세한 내용은 계층 적 인젝터 문서를 참조하십시오.

답변

Angular 2 베타 기준 :

다음 @Injectable과 같이 서비스에 추가 하십시오.

@Injectable()
export class NameService {
    names: Array<string>;

    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }

    getNames() {
        return this.names;
    }
}

구성 요소 구성에 다음 providers을 추가하십시오 .

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

답변

의 메타 데이터 배열 NameService안에 삽입해야합니다 .providersAppModuleNgModule

@NgModule({
   imports: [BrowserModule, ...],
   declarations: [...],
   bootstrap: [AppComponent],
   //inject providers below if you want single instance to be share amongst app
   providers: [MyService]
})
export class AppModule {

}

응용 프로그램의 상태를 신경 쓰지 않고 특정 구성 요소 수준에 대한 종속성을 만들려면 providers허용 된 @Klass 답변 과 같은 구성 요소 메타 데이터 옵션 에 해당 종속성을 삽입 할 수 있습니다 .

답변

놀랍게도 구문은 최신 버전의 Angular에서 다시 변경되었습니다 🙂 Angular 6 문서에서 :

Angular 6.0부터는 싱글 톤 서비스를 생성하는 기본 방법은 서비스에서 애플리케이션 루트에 제공해야하는 서비스를 지정하는 것입니다. 이는 서비스의 @Injectable 데코레이터에서 providedIn을 루트로 설정하여 수행됩니다.

src / app / user.service.0.ts

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

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

답변

AppModule의 NgModule 메타 데이터의 공급자 배열에 NameService를 삽입해야합니다.

@NgModule({
   providers: [MyService]
})

SystemJ가 대소 문자를 구분하므로 설계 상 동일한 이름으로 대소 문자를 구분하여 구성 요소를 가져와야합니다. 프로젝트 파일에서 다음과 같이 다른 경로 이름을 사용하는 경우 :

main.module.ts

import { MyService } from './MyService';

your-component.ts

import { MyService } from './Myservice';

그런 다음 System js는 이중 가져 오기를 수행합니다.

답변

Angular v2 이상에서는 다음과 같습니다.

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