의 목적은 무엇입니까?Angular 6에서 서비스를 생성할 때 주입식 장식기와 함께?
Angular CLI에서 서비스를 생성할 때 Injectable 데코레이터의 기본값이 'root'인 '제공된' 속성을 가진 메타데이터를 추가합니다.
@Injectable({
providedIn: 'root',
})
제공되는 것은 무엇입니까?인가요? 저는 이것이 전체 어플리케이션에서 '글로벌' 타입의 싱글톤 서비스처럼 서비스를 이용할 수 있게 한다고 가정합니다만, AppModule의 프로바이더 어레이에서 이러한 서비스를 선언하는 것이 더 명확하지 않을까요?
providedIn: 'root' 6 Angular 6 서비스를 제공하는 가장 쉽고 효율적인 입니다.
- 이 서비스는 모듈 공급자 어레이(예: Angular <= 5)에 추가할 필요 없이 애플리케이션 전체에서 사용할 수 있습니다.
- 서비스가 느리게 로드된 모듈 내에서만 사용되는 경우 해당 모듈과 함께 느리게 로드됩니다.
- 사용하지 않을 경우 빌드(트리 셰이크)에 포함되지 않습니다.
자세한 내용은 매뉴얼 및 NgModule FAQ를 참조하십시오.
그 외:
- 애플리케이션 전체의 싱글톤을 사용하지 않는 경우는 프로바이더의 컴포넌트 배열을 대신 사용합니다.
- 의 다른 가 서비스를 하려면 을 하십시오.
providersNg Module 배배다다 。
문서로부터
주입식 데코레이터란 무엇입니까?
클래스를 인젝터가 만들 수 있는 것으로 표시합니다.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class UserService {
}
서비스 자체는 CLI에 의해 생성된 클래스이며 @Injectable()로 장식되어 있습니다.
제공되는 것은 무엇입니까?인도?
@NgModule 또는 다른 인젝터와 연결하여 어떤 인젝터를 제공할지 결정합니다.또는 대부분의 앱에서 응용 프로그램 수준 인젝터가 되는 'root' 인젝터에 이 주입 가능 여부를 지정합니다.
providedIn: Type<any> | 'root' | null
제공된입력: 'root'
루트 레벨에서 서비스를 제공하면 Angular는 단일 공유 서비스 인스턴스를 생성하여 서비스를 요구하는 클래스에 삽입합니다.또한 @Injectable() 메타데이터에 공급자를 등록하면 Angular는 서비스를 사용하지 않을 경우 컴파일된 앱에서 제거하여 앱을 최적화할 수 있습니다.
제공된입력: 모듈
특정 @NgModule에서 서비스를 제공하도록 지정할 수도 있습니다.예를 들어 작성한 모듈을 Import하지 않는 한 응용 프로그램에서 서비스를 사용할 수 없도록 하려면 해당 모듈에서 서비스를 제공하도록 지정할 수 있습니다.
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 {
}
providedIn을 사용하면 주입 가능이 모듈 공급자에 추가되지 않고 모듈의 공급자로 등록됩니다.
송신원
서비스 자체는 CLI에 의해 생성된 클래스이며 @Injectable로 장식되어 있습니다.디폴트로는 이 데코레이터는 지정된 로 구성되어 있습니다.In property: 서비스 공급자를 만듭니다.이 경우,In: 'root'는 서비스가 루트 인젝터에서 제공되도록 지정합니다.
@Nipuna의 훌륭한 설명을 참조하십시오.
예를 들어 확장해 나가고 싶습니다.
인젝터블 하지 않고 providedin 예를 들어 「」, 「」등의
@Injectable()
각 의 서비스 합니다.providers
이렇게.
data.service.ts »
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
constructor() {}
// Code . . .
}
app.disc.ts »
import { AppComponent } from './app.component';
import { DataService } from './core/data.service';
@NgModule({
declarations: [AppComponent],
providers: [DataService], // ⟵ LOOK HERE WE PROVIDED IT
imports: [...],
bootstrap: [AppComponent],
})
export class AppModule {}
데약만을 providedIn: 'root' 이렇게요.
data.service.ts »
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class DataService {
constructor() {}
// Code . . .
}
다음으로 모듈은 다음과 같습니다.
app.disc.ts »
import { AppComponent } from './app.component';
import { DataService } from './core/data.service';
@NgModule({
declarations: [AppComponent],
providers: [],
imports: [...],
bootstrap: [AppComponent],
})
export class AppModule {}
I do added 가가 see 。DataServiceproviders이번에는 어레이가 필요없기 때문에 어레이가 필요합니다.
베스트 프랙티스
이것은 Angular Guide에서 유용하게 사용할 수 있습니다.
서비스의 @Injectable 데코레이터에서 앱 루트 인젝터를 사용하여 서비스를 제공하십시오.
왜요? 각도 주입기는 계층적이거든요
왜? 루트 인젝터에 서비스를 제공하면 해당 서비스 인스턴스가 공유되어 서비스가 필요한 모든 클래스에서 사용할 수 있습니다.이것은 서비스가 메서드 또는 상태를 공유하는 경우에 이상적입니다.
왜? 서비스의 @Injectable 데코레이터에 서비스를 등록하면 Angular CLI의 프로덕션 빌드에서 사용하는 최적화 툴과 같은 최적화 툴이 트리 흔들기를 수행하고 앱에서 사용하지 않는 서비스를 제거할 수 있습니다.
왜? 두 개의 다른 컴포넌트에 다른 서비스 인스턴스가 필요한 경우에는 이 방법이 이상적이지 않습니다.이 시나리오에서는 새로운 개별 인스턴스가 필요한 컴포넌트 수준에서 서비스를 제공하는 것이 좋습니다.
이것은 Angular 9+(Post-Ivy)에 최신이며 2022년에 정확할 것입니다.
TL;DR: 서비스의 인스턴스 수 및 인스턴스 생성 후 사용할 수 있는 위치를 제어하는 것이 중요합니다.
용어:
주입식 - 로 장식된 모든 클래스
@Injectable예를 들어 서비스입니다.Injector - 아래의 클래스에 Injectables를 제공할 수 있는 Angular 클래스입니다(모든 구성 요소와 모듈이 포함됩니다).
injector scope/level - 특정 인젝터를 "실행"하는 모든 클래스 인스턴스의 범위.
인젝터 계층 구조 - 다음과 같이 구성된 인젝터 스코프의 프리라이티드 트리
platform -> root -> module -> componentdisclossible을 클릭합니다.Injectionable(주입 가능) 제공 - Injectionable(주입 가능) 인스턴스는 요청이 있을 때마다 이 특정 인젝터 레벨 미만의 클래스에 제공됩니다.
Injectionable이 주입되었습니다.클래스 컨스트럭터가 서비스 인스턴스를 지정하도록 요청했기 때문에 Angular는 인젝터 계층에서 찾을 수 있는 가장 가까운 인스턴스를 제공하려고 합니다."
트리 셰이킹 - Angular 컴파일러 덕분에 자동으로 실행되는 최적화입니다.일부 코드가 사용되지 않는 것을 감지하면 해당 코드는 앱의 최종 컴파일(또는 느리게 로드된 특정 모듈의 컴파일)에서 제거됩니다.
클래스, 인스턴스, 모듈, 컴포넌트, 저속/부하 모듈 등 이미 알고 있어야 할 다른 용어.
Q: 정확히 어떤 기능입니까?providedIn 할수 수 do do do?
주입식 인젝터를 결정하는 설정입니다.
''을 MyService모든 옵션의 기능을 설명합니다.
providedIn: Type<any> | 'root' | 'platform' | 'any' | null
providedIn: 'platform'
는 Angular의 단일 합니다.MyService모든 Angular 어플리케이션으로 이동합니다.(마이크로 프런트 엔드 아키텍처를 사용하는 경우 고급 사용 사례에만 해당됩니다.)
providedIn: 'root'
는 Angular의 단일 합니다.MyService응용 프로그램의 모든 클래스에 제공합니다.
providedIn: 'any'
는 Angular의 단일 합니다.MyService부하가 높은 모듈의 모든 클래스에 제공합니다.
단, 저속 로드된 각 모듈은 독자적인 새로운 개별 인스턴스를 제공합니다.MyService(이 경우 해당 모듈 내의 클래스에서만 사용할 수 있습니다).
providedIn: MyModule
는 Angular의 합니다.MyServiceMyModule로딩되어 있습니다.
ifMyModule이 인스턴스는 앞으로 열심히 로드된 다른 모든 모듈에서 사용할 수 있게 됩니다.(이것은 사실상providedIn: 'root'
「」의 경우는, 「」입니다.MyModule이 인스턴스는 내부 클래스에 대해서만 제공됩니다.MyModule로딩될 때마다,
providedIn: MyComponent
는 Angular의 새로운 .MyServiceMyComponent인스턴스화 됩니다.
★★★★★★★★★★★★★★★★★.MyService 스스는ants の antsantsantsantsantsantsants の됩니다.MyComponent instance는 컴포넌트 인스턴스가 파기되는 즉시 파기됩니다.(이것은, 새로운 테크놀로,MyService이 컴포넌트가 렌더링될 때마다 작성됩니다.)
providedIn: null
MyService할 수 없다providers정정 、 또는또또또또 포포레어 。
가 생성됩니다.MyService(자세한 해 주세요).providers★★★★★★★★★★★★★★★★★★★★★」
Q: 요 가 뭐죠?providers레이이 어떻 ?? ???
인젝터에 대해 든든음음 음음음음 음음음 음음음 be be any를 할 수 .providers 스위칭:
@NgModule({
providers: [MyService],
})
@Component({
providers: [MyService],
})
은 '주입 가능'에 할 수 .providers어레이에 관계없이providedIn★★★★★★ 。
" " " MyService로로 합니다.providers를 지정하면 는 그 injector의 하여 그 scopearray의 합니다.(scope는 에 되어 있는 것과 providedIn: MyModule ★★★★★★★★★★★★★★★★★」providedIn: MyComponent★★★★★★★★★★★★★★★★★★★★★」
이 제공 방식은 트리 셰이킹을 지원하지 않습니다.이 서비스는 아무도 사용하지 않는 경우에도 항상 컴파일에 포함됩니다.(아래 트리 셰이킹 노트 참조).
Q: ?를 사용하는 는 무엇입니까?providers배열 및 providedIn 시동시?
를 들어, 사용 로는 '하다'를 들 수 있습니다.MyServiceprovidedIn: 'root'는 이미 공유 인스턴스가 있지만 모듈/컴포넌트에는 독자적인 개별 인스턴스가 필요합니다.
기타 주의사항:
Q: 어떻게 해야 하나요?providedIn/providers리에에 영향 ?? ????
로 구성된 주입 가능은 할당된 주입기 스코프의 어느 클래스에서도 주입되지 않으면 트리 셰이킹됩니다.
단, 일부 모듈/컴포넌트의 어레이에 할당되어 있는 Injectionable은 어디에 삽입되어 있지 않아도 트리가 흔들리지 않습니다.
를 가장 하기 '나무 흔들기'를 .providedIn에 걸쳐서providersmanager.manager로 하다
Q: ?를 사용하는 는 무엇입니까?providedIn: 'root'내가 생각하기에 을 사용하는 것 같다.providers로 에 AppModule더끗끗 이이??
와 같이 두 방법의 주요 두 가지 방법 사이에 .providedIn는 트리 트리를 하며, 는 트리 트리를 지원합니다.providers어레이는 그렇지 않습니다.
그 외에는 아키텍처상의 결정입니다.providedInInjectionable 파일에서 직접 Injectionable이 제공하는 방법에 대한 결정을 소유합니다.계약 소유자를 구별하는 것은 수백 개의 모듈 간에 협력해야 하는 대규모 애플리케이션 및 팀에 큰 영향을 미칩니다.
Q: 설정에는 요?providers: [MyService]로 에 AppComponent ★★★★★★★★★★★★★★★★★」AppModule
ㅇㅇ.MyService저속 로드된 모듈로 제공됩니다.AppModule 아니라, 이에요.AppComponent.
레이지 이 (「」에 하기 때문입니다).Router 「 Import 」 )에 됩니다.AppModule가 보다 , 1개의 인젝터 스코프가 "1" " " " " 입니다.AppComponent
제공된In은 Angular에게 루트 인젝터가 서비스 인스턴스 작성을 담당함을 알립니다.이 방법으로 제공되는 서비스는 애플리케이션 전체에서 자동으로 사용 가능하므로 어떤 모듈에도 나열할 필요가 없습니다.
서비스 클래스는 독자적인 프로바이더로서 기능할 수 있기 때문에, @Injectable 데코레이터로 정의하는 것만으로 충분합니다.
에 따르면:
또한 @Injectable() 메타데이터에 공급자를 등록하면 Angular는 서비스를 사용하지 않을 경우 컴파일된 앱에서 제거하여 앱을 최적화할 수 있습니다.
간단하게...
providedIn :'root'.인스턴스는 1개의 인스턴스에서 .어플리케이션에서 인스턴스를 제공할 필요는 없습니다.NgModule하는 것 @Injectable데코레이터
구성 요소에 대해 이 서비스의 새 인스턴스를 하나 가지려면 구성 요소의 공급자를 통해 선언하십시오.그러면 이 구성 요소와 하위 구성 요소(있는 경우)에 대해 다른 새 인스턴스가 생성됩니다.따라서 글로벌 스코프를 가진 인스턴스와 컴포넌트별로 다른 인스턴스를 설정할 수 있습니다.
언급URL : https://stackoverflow.com/questions/50848357/what-is-the-purpose-of-providedin-with-the-injectable-decorator-when-generating
'programing' 카테고리의 다른 글
| ORA-28000: 계정 잠김 오류 발생 빈도 (0) | 2023.03.11 |
|---|---|
| Woocommerce의 WP_query에서 카탈로그에 표시되는 제품 가져오기 (0) | 2023.03.06 |
| 커스텀 Marshal JSON()이 이동 중에 호출되지 않음 (0) | 2023.03.06 |
| 봄 MVC 패치 방식: 부분 업데이트 (0) | 2023.03.06 |
| Newtonsoft 개체 → JSON 문자열 가져오기 (0) | 2023.03.06 |