NameService에 대한 각도 없음 공급자
클래스를 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에는 서비스를 "제공"할 수있는 세 곳이 있습니다.
- 부트 스트랩
- 루트 컴포넌트
- 다른 구성 요소 또는 지침
"부트 스트랩 제공자 옵션은 라우팅 지원과 같이 Angular의 사전 등록 된 서비스를 구성하고 대체하기위한 것입니다." - 참조
전체 앱 (예 : Singleton)에서 NameService 인스턴스를 하나만 원하는 경우 providers루트 구성 요소 의 배열에 포함하십시오.
@Component({
providers: [NameService],
...
)}
export class AppComponent { ... }
구성 요소 당 하나의 인스턴스를 원한다면 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 답변 과 같은 구성 요소 메타 데이터 옵션 에 해당 종속성을 삽입 할 수 있습니다 .
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: ... })
놀랍게도 구문은 최신 버전의 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 {
}
Angular 2가 변경되었습니다. 코드 상단은 다음과 같습니다.
import {
ComponentAnnotation as Component,
ViewAnnotation as View, bootstrap
} from 'angular2/angular2';
import {NameService} from "./services/NameService";
@Component({
selector: 'app',
appInjector: [NameService]
})
또한 서비스에서 getter 및 setter를 사용할 수 있습니다.
export class NameService {
_names: Array<string>;
constructor() {
this._names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
get names() {
return this._names;
}
}
그런 다음 앱에서 간단하게 할 수 있습니다.
this.names = nameService.names;
plnkr.co에 가서 새로운 Angular 2 (ES6) plunk를 만들어서 먼저 작동 시키십시오. 그것은 당신을 위해 모든 것을 설정합니다. 작업이 끝나면 다른 환경으로 복사하고 해당 환경의 문제를 심사합니다.
이 오류 No provider for NameService는 많은 Angular2 초보자가 직면하는 일반적인 문제입니다.
이유 : 사용자 정의 서비스를 사용하기 전에 먼저 제공자 목록에 서비스를 추가하여 NgModule에 등록해야합니다.
해결책:
@NgModule({
imports: [...],
providers: [CustomServiceName]
})
부트 스트랩 명령에서 다음과 같이 종속성을 선언 할 수도 있습니다.
bootstrap(MyAppComponent,[NameService]);
적어도 그것이 alpha40에서 나를 위해 일한 것입니다.
이것은 링크입니다 : http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0
안녕하세요, .ts 파일에서 이것을 사용할 수 있습니다.
먼저이 .ts 파일에서 서비스를 가져옵니다.
import { Your_Service_Name } from './path_To_Your_Service_Name';
그런 다음 동일한 파일에 다음을 추가 할 수 있습니다 providers: [Your_Service_Name].
@Component({
selector: 'my-app',
providers: [Your_Service_Name],
template: `
<h1>Hello World</h1> `
})
로 추가 제공 하지 주사제
@Component({
selector:'my-app',
providers: [NameService]
})
구성 요소의 모든 용량을 포함하는 providers 배열에 추가해야합니다.
각도 문서에서이 섹션을보십시오.
컴포넌트에 제공자 등록
다음은 공급자 배열에 HeroService를 등록하는 수정 된 HeroesComponent입니다.
import { Component } from '@angular/core';
import { HeroService } from './hero.service';
@Component({
selector: 'my-heroes',
providers: [HeroService],
template: `
<h2>Heroes</h2>
<hero-list></hero-list>
`
})
export class HeroesComponent { }
NgModule과 응용 프로그램 구성 요소를 함께 사용하는 경우
한편으로 NgModule의 공급자는 루트 인젝터에 등록됩니다. 이는 NgModule에 등록 된 모든 제공자가 전체 애플리케이션에서 액세스 할 수 있음을 의미합니다.
반면에 응용 프로그램 구성 요소에 등록 된 공급자는 해당 구성 요소와 모든 해당 자식에서만 사용할 수 있습니다.
여기서 APP_CONFIG 서비스는 애플리케이션 전체에서 사용 가능해야하므로 AppModule @NgModule 제공자 배열에 등록됩니다. 그러나 HeroService는 Heroes 기능 영역 및 다른 곳에서만 사용되므로 HeroesComponent에 등록하는 것이 좋습니다.
"루트 AppModule 또는 루트 AppComponent에 앱 전체 공급자를 추가해야합니까?"도 참조하십시오. NgModule FAQ에서.
따라서 귀하의 경우 주사제를 다음과 같이 공급자로 변경하십시오.
@Component({
selector: 'my-app',
providers: [NameService]
})
또한 Angular의 새로운 버전에서는 @View와 다른 것들이 사라졌습니다.
app.module.ts 파일의 provider [] 배열에 서비스를 추가하십시오. 아래처럼
// 여기 내 서비스는 CarService입니다
app.module.ts
import {CarsService} from './cars.service';
providers: [CarsService] // you can include as many services you have
Angular2는 부트 스트랩 함수 호출에서 모든 인젝터 블을 선언해야합니다. 이것이 없으면 서비스는 주사 가능한 대상이 아닙니다.
bootstrap(MyAppComponent,[NameService]);
다음과 같이 서비스에 @Injectable을 추가하십시오.
export class NameService {
names: Array<string>;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
getNames() {
return this.names;
}
}
구성 요소에서 공급자를 다음과 같이 추가하십시오.
@Component({
selector: 'my-app',
providers: [NameService]
})
또는 애플리케이션 전체에서 서비스에 액세스하려는 경우 앱 제공자에게 전달할 수 있습니다.
Angular에서는 다음 두 가지 방법으로 서비스를 등록 할 수 있습니다.
1. 모듈 또는 루트 구성 요소에 서비스 등록
효과 :
- 모든 구성 요소에 사용 가능
- 평생 적용 가능
지연로드 된 모듈에 서비스를 등록하는 경우주의해야합니다.
서비스는 해당 모듈에 선언 된 구성 요소에서만 사용할 수 있습니다
서비스는 모듈이로드 된 경우에만 평생 애플리케이션에서 사용 가능합니다
2. 다른 응용 프로그램 구성 요소에 서비스 등록
효과 :
- 구성 요소에 별도의 서비스 인스턴스가 주입됩니다.
다른 응용 프로그램 구성 요소에 서비스를 등록하는 경우주의해야합니다
주입 된 서비스의 인스턴스는 구성 요소 및 모든 하위 요소에서만 사용할 수 있습니다.
구성 요소 수명 동안 인스턴스를 사용할 수 있습니다.
인용구
컴포넌트에 제공자 등록
다음은 공급자 배열에 HeroService를 등록하는 수정 된 HeroesComponent입니다.
import { Component } from '@angular/core';
import { HeroService } from './hero.service';
@Component({
selector: 'my-heroes',
providers: [HeroService],
template: `
`
})
export class HeroesComponent { }
참고 URL : https://stackoverflow.com/questions/30580083/angular-no-provider-for-nameservice
'Programing' 카테고리의 다른 글
| 문자열 구분 기호 (표준 C ++)를 사용하여 C ++에서 문자열 구문 분석 (분할) (0) | 2020.03.17 |
|---|---|
| AWS EFS vs EBS vs S3 (차이 및 사용시기) (0) | 2020.03.17 |
| 여러 변수가있는 문장 사용하기 (0) | 2020.03.17 |
| 마지막으로 삽입 된 ID에 대한 PostgreSQL 함수 (0) | 2020.03.17 |
| 각도-서비스 및 구성 요소에 파이프 사용 (0) | 2020.03.17 |