Angular 6에서 서비스를 생성 할 때 Injectable 데코레이터와 함께 제공되는 목적은 무엇입니까?


136

Angular CLI에서 서비스를 생성 할 때 인젝터 블 데코레이터의 기본 값이 'root'인 'provided in'특성을 가진 메타 데이터가 추가됩니다.

@Injectable({
  providedIn: 'root',
})

정확히 무엇을 제공합니까? 이것이 전체 응용 프로그램에 대해 '전역'유형의 싱글 톤 서비스처럼 서비스를 제공한다고 가정하고 있지만 AppModule의 공급자 배열에서 이러한 서비스를 선언하는 것이 더 깨끗하지 않습니까?

최신 정보:

다른 사람을 위해, 다음 단락은 특히 기능 모듈에만 서비스를 제공하려는 경우 이에 대한 또 다른 좋은 설명을 제공했습니다.

이제 @Injectable()providedIn 속성을 사용하여 데코레이터 내부에 공급자를 등록하는 새로운 권장 방법이 있습니다. 'root'응용 프로그램의 값 또는 모듈로 허용 됩니다. 당신이 사용하는 경우 'root', 당신은 injectable응용 프로그램에서 싱글로 등록됩니다, 당신은 루트 모듈의 공급 업체에 추가 할 필요가 없습니다. 당신이 사용하는 경우 마찬가지로, providedIn: UsersModule의는 injectable의 공급자로 등록되어 UsersModule받는 사람을 추가하지 않고 providers모듈의 "-. https://blog.ninja-squad.com/2018/05/04/what-is-new-angular -6 /

업데이트 2 :

추가 조사 후, 나는 그것을 가지고있는 것이 유용하다고 결정했습니다 providedIn: 'root'

provide루트 모듈 이외의 다른 모듈에서 서비스 를 원한다면 providers피처 모듈 데코레이터에서 배열을 사용하는 것이 좋습니다 . 그렇지 않으면 순환 종속성에 시달립니다. 흥미로운 토론이 여기에 있습니다-https: //github.com/angular/angular-cli/issues/10170


17
귀하의 업데이트는 귀하의 질문에 추가하는 대신 답변 (자신의 질문에 답변 할 수 있음)이어야한다고 생각합니다.
PhoneixS

가장 중요한 부분은 SINGLETON이며 아무도 언급하지 않습니다!
Kyle Burkett

답변:


54

providedIn을 사용하는 경우, 인젝터 블은 모듈의 제공자에 추가하지 않고 모듈의 제공자로 등록됩니다.

에서 Docs

서비스 자체는 CLI가 생성하고 @Injectable로 장식 된 클래스입니다. 기본적으로이 데코레이터는 providedIn 속성으로 구성되어 서비스 공급자를 만듭니다. 이 경우 providedIn : 'root'는 서비스가 루트 인젝터에 제공되도록 지정합니다.


4
감사합니다 Sajeetharan. 서비스 제공 위치를 지정하는 새로운 바로 가기 방법 인 것 같습니다. (?) 나는 나의 초기 환경 설정 .... 오히려 ProvidedIn 태그에 대한 흩어져 코드 기반을 정독하는 것보다 업체로 선언 된 모든 서비스를 볼 수있는 모듈의 공급자 목록에서 찾고있는 것 같아요
스테판 Zvonar

2
Angular가 이것을 추가 할 이유가 있습니까? 이 문제를 해결하는 데 문제가 있습니까? 나는 이것에 대한 이유가 없다고 생각합니다.
prolink007

3
AppModule / CoreModule 정의를 약간 작게 유지;)
Stefan Zvonar

22
@ prolink007. providedIn을 사용하면 앱이 서비스를 지연로드 할 수 있습니다. 이를 테스트하려면 서비스에 콘솔 로그를 넣으십시오. 내 홈페이지는 16 개의 서비스를로드하는 데 사용되었지만 이제는 9를로드합니다. 성능을 정량화하기는 어렵지만 필요할 때까지 서비스를로드하지 않는다는 것을 더 잘 알고 있습니다. :).
Stevethemacguy 2009 년

3
데코레이터를 providedIn사용할 때 서비스를 초기화해야하는 위치를 정의하기 위해 속성을 사용하여 서비스를 트리에서 흔들 수있게 만들 수 있습니다 @Injectable(). 그런 다음 NgModule선언 의 provider 속성과 import 문에서이를 제거해야합니다. 이렇게하면 번들에서 사용되지 않는 코드를 제거하여 번들 크기를 줄일 수 있습니다.
nircraft

48

providedIn: 'root' Angular 6 이후로 서비스를 제공하는 가장 쉽고 효율적인 방법입니다.

  1. 이 서비스는 모듈의 공급자 배열 (예 : Angular <= 5)에 추가 할 필요없이 단일 응용 프로그램에서 단일 응용 프로그램으로 사용할 수 있습니다.
  2. 서비스가 지연로드 된 모듈 내에서만 사용되는 경우 해당 모듈과 함께 지연로드됩니다.
  3. 사용하지 않으면 빌드에 포함되지 않습니다 (트리 흔들림).

자세한 내용은 설명서NgModule FAQ를 참조하십시오.

Btw :

  1. 응용 프로그램 전체의 싱글 톤을 원하지 않으면 공급자의 구성 요소 배열을 대신 사용하십시오.
  2. 다른 개발자가 특정 모듈 외부에서 서비스를 사용하지 않도록 범위를 제한하려면 providers대신 NgModule 배열을 사용하십시오 .

37

문서에서

주사 가능한 데코레이터 란 무엇입니까?

클래스를 인젝터에서 사용할 수있는 것으로 표시합니다.

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

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

서비스 자체는 CLI가 생성 한 클래스이며 @Injectable ()로 장식되어 있습니다.

정확히 무엇을 제공합니까?

@NgModule 또는 다른 InjectorType과 연관 시키거나이 인젝터를 '루트'인젝터에 제공하도록 지정하여 인젝터를 제공 할 인젝터를 판별하십시오. 이는 대부분의 앱에서 애플리케이션 레벨 인젝터입니다.

providedIn: Type<any> | 'root' | null

제공 : '루트'

루트 수준에서 서비스를 제공하면 Angular는 하나의 공유 서비스 인스턴스를 생성하여이를 요청하는 모든 클래스에 주입합니다. 제공자를 @Injectable () 메타 데이터에 등록하면 Angular는 컴파일 된 앱에서 서비스를 사용하지 않는 경우 서비스를 제거하여 앱을 최적화 할 수 있습니다.

제공 : 모듈

특정 @NgModule에서 서비스를 제공하도록 지정할 수도 있습니다. 예를 들어, 생성 한 모듈을 가져 오지 않으면 응용 프로그램에서 서비스를 사용할 수 없게하려면 서비스를 모듈에 제공하도록 지정할 수 있습니다

import { Injectable } from '@angular/core';
import { UserModule } from './user.module';

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

이 방법은 아무 것도 주입하지 않으면 서비스의 트리 쉐이킹 ( 트리 쉐이킹 은 코드 기반에서 사용되지 않는 코드를 제거하는 빌드 프로세스의 단계)을 가능하게하기 때문에 선호 됩니다.

어떤 모듈이 어떤 모듈을 제공해야하는지 서비스에서 지정할 수없는 경우, 모듈 내에서 서비스 제공자를 선언 할 수도 있습니다.

import { NgModule } from '@angular/core';
import { UserService } from './user.service';

@NgModule({
  providers: [UserService],
})
export class UserModule {
}

4
가장 좋은 설명.
nop

2
이 답변은 각도 문서의 정의보다 낫습니다. 매우 명확한.
Shameera Anuranga

2
잘 설명했습니다. 많이 감사합니다!
Zaki Mohammed

비어있을 때는 @Injectable()어떻습니까?
벤 탈리아도 로스

13

providedIn은 루트 인젝터가 서비스 인스턴스 작성을 담당 함을 Angular에 알려줍니다. 이러한 방식으로 제공되는 서비스는 전체 응용 프로그램에서 자동으로 사용할 수 있으며 모듈에 나열 할 필요가 없습니다.

서비스 클래스는 자체 공급자로 작동 할 수 있으므로 @Injectable 데코레이터에서이를 정의하는 것이 필요한 모든 등록 이유입니다.


4

에 따르면 Documentation:

제공자를 @Injectable () 메타 데이터에 등록하면 Angular는 컴파일 된 앱에서 서비스를 사용하지 않는 경우 서비스를 제거하여 앱을 최적화 할 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.