NameService에 대한 공급자 각도 없음
Angular 구성 요소에 클래스를 로드하는 데 문제가 있습니다.저는 오랫동안 이 문제를 해결하려고 노력했습니다. 심지어 이 모든 것을 하나의 파일로 연결하려고도 했습니다.내가 가진 건
응용 프로그램.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.
제 코드로 문제를 찾아내는 데 도움을 주실 수 있나요?
쓰셔야 돼요.providersinjectables
@Component({
selector: 'my-app',
providers: [NameService]
})
코드 샘플을 완성합니다.
Angular 2에서는 서비스를 "제공"할 수 있는 장소가 3개 있습니다.
- 부트스트랩
- 루트 성분
- 기타 컴포넌트 또는 지시사항
"부트스트랩 프로바이더 옵션은 라우팅 지원 등 Angular 자체 사전 등록된 서비스를 설정 및 덮어쓰기 위한 것입니다." -- 참조.
하는 경우 인스턴스를 시킵니다.providers「 」의 「 」의 「 」
@Component({
providers: [NameService],
...
)}
export class AppComponent { ... }
「1」을 해 .providers대신 컴포넌트 구성 객체에 어레이를 추가합니다.
@Component({
providers: [NameService],
...
)}
export class SomeOtherComponentOrDirective { ... }
자세한 내용은 계층형 인젝터 문서를 참조하십시오.
Angular 2 베타 기준:
서비스에 다음과 같이 추가합니다.
@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]
})
를 놓아야 .NameService에 inside inside inside providers하시는 の array arrayAppModule의 »NgModule메타데이터.
@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 answer와 같은 메타데이터 옵션이 표시됩니다.
놀랍게도 최신 버전의 Angular :-) From Angular 6 docs에서는 구문이 다시 변경되었습니다.
Angular 6.0 이후 싱글톤서비스를 작성하기 위해서는 어플리케이션루트로 제공할 필요가 있는 서비스를 서비스로 지정하는 것이 권장됩니다.이 작업은 지정된 설정에 따라 수행됩니다.서비스의 @Injectable 데코레이터를 기반으로 합니다.
src/app/user.service.0.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class UserService {
}
AppModule의 NgModule 메타데이터의 공급자 배열 내에 NameService를 삽입해야 합니다.
@NgModule({
providers: [MyService]
})
컴포넌트에 같은 이름(대문자와 소문자가 구분됨)으로 Import해야 합니다.SystemJs는 대소문자를 구분합니다(설계상).프로젝트 파일에서 다음과 같이 다른 경로 이름을 사용하는 경우:
main.disc.ts.main.
import { MyService } from './MyService';
사용자 컴포넌트.ts
import { MyService } from './Myservice';
그러면 시스템 js는 이중 가져오기를 수행합니다.
Angular v2 이상에서는 다음과 같습니다.
@Component({ selector:'my-app', providers: [NameService], template: ... })
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) 플랭크를 생성하여 먼저 동작시키는 것이 좋습니다.모든 것이 준비되어 있습니다.동작하고 있는 경우는, 다른 환경에 카피하고, 그 환경에서 발생하는 문제를 분류합니다.
「」No provider for NameServiceAngular2는 Angular2로 되어 있습니다.
이유: 커스텀 서비스를 사용하기 전에 먼저 공급자 목록에 추가하여 NgModule에 등록해야 합니다.
솔루션:
@NgModule({
imports: [...],
providers: [CustomServiceName]
})
다음과 같이 bootstrap-command에서 종속성을 선언할 수도 있습니다.
bootstrap(MyAppComponent,[NameService]);
적어도 알파40에서는 그렇게 작동했으니까
이 링크는 http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0 입니다.
안녕하세요. .ts 파일에서 사용할 수 있습니다.
먼저 다음 .ts 파일에서 서비스를 Import합니다.
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]
})
Angular에서는 다음 두 가지 방법으로 서비스를 등록할 수 있습니다.
1. 모듈 또는 루트 컴포넌트에 서비스를 등록합니다.
효과:
- 모든 컴포넌트에서 사용 가능
- 라이프타임 어플리케이션으로 이용 가능
서비스를 느리게 로드된 모듈에 등록할 때는 주의해야 합니다.
이 서비스는 해당 모듈에 선언된 구성 요소에서만 사용할 수 있습니다.
모듈이 로드된 경우에만 수명 응용 프로그램에서 서비스를 사용할 수 있습니다.
2. 다른 애플리케이션 컴포넌트에 서비스를 등록합니다.
효과:
- 다른 서비스 인스턴스가 컴포넌트에 주입됩니다.
다른 애플리케이션 구성 요소에 서비스를 등록할 때는 주의해야 합니다.
주입된 서비스의 인스턴스는 컴포넌트와 그 모든 자식에서만 사용할 수 있습니다.
인스턴스는 구성 요소 수명 동안 사용할 수 있습니다.
구성 요소의 모든 종속성을 포함하는 공급자 배열에 추가해야 합니다.
각 문서의 다음 섹션을 참조하십시오.
구성 요소에 공급자 등록
이것은 HeroService를 프로바이더 어레이에 등록하는 개정판 Heroes Component입니다.
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 providers 배열에 등록됩니다.그러나 HeroService는 Heroes 기능 영역 내에서만 사용되므로 Heroes Component에 등록하는 것이 좋습니다.
또한 NgModule FAQ의 "루트 AppModule 또는 루트 AppComponent에 앱 전체 공급자를 추가해야 합니까?"를 참조하십시오.
따라서 다음과 같이 주입식 제품을 프로바이더로 변경하기만 하면 됩니다.
@Component({
selector: 'my-app',
providers: [NameService]
})
또한 Angular, @View 등의 새로운 버전에서는 일부 기능이 사라졌습니다.
자세한 것은, 여기를 봐 주세요.
서비스를 app.disc.ts 파일의 provider []어레이에 추가합니다.아래와 같이
// 여기서 제 서비스는 Car Service입니다.
app.disc.ts
import {CarsService} from './cars.service';
providers: [CarsService] // you can include as many services you have
블록 따옴표
구성 요소에 공급자 등록
이것은 HeroService를 프로바이더 어레이에 등록하는 개정판 Heroes Component입니다.
import { Component } from '@angular/core';
import { HeroService } from './hero.service';
@Component({
selector: 'my-heroes',
providers: [HeroService],
template: `
`
})
export class HeroesComponent { }
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]
})
또는 애플리케이션 전체에 걸쳐 서비스에 액세스하고 싶은 경우 앱 공급자를 전달할 수 있습니다.
언급URL : https://stackoverflow.com/questions/30580083/angular-no-provider-for-nameservice
'programing' 카테고리의 다른 글
| 웹 팩 및 글꼴 페이스로 글꼴 로드 (0) | 2023.03.28 |
|---|---|
| spring-boot에 application.properties 파일을 여러 개 추가하는 방법 (0) | 2023.03.28 |
| 페이지의 모든 AJAX 요청에 "훅" 추가 (0) | 2023.03.28 |
| Angular.js 컨트롤러 파라미터의 이해 (0) | 2023.03.28 |
| 비행 전 CORS 요청을 도입한 동기는 무엇입니까? (0) | 2023.03.28 |