[Angular 9] Improved Dependency Injection with the new providedIn scopes 'any' and 'platform'
@Injectable({ providedIn: "root" | "any" | "platform" }) export class MyService {}
ProvidedIn: root
Every service defined with 'root' will be provided in the root injector and is a singleton for the whole application. Lazy modules will use the instance from root.
You will still using 'root' for you application for most of time.
ProvidedIn: platform
Every service defined with 'platform' will be provided in the platform injector and is a singleton for all applications. Lazy modules will use the instance from platform.
The difference between 'root' and 'platform' is only noticeable when running multiple Angular application in the same window. Both make sure that only one singleton exists even for lazy loaded modules. But when running two applications in the same window, each application has it's own root injector but both share the platform injector.
This means that the best use case for providedIn: 'platform' is for sharing services over application boundaries. E.g. with Angular Elements.
If you are using Micro Front, and your app contains multi small apps and angular element, for all those apps want to share the same service, for example, AuthService, you can use 'platform'.
ProvidedIn: any
Every service defined with 'any' will be provided in every module it is used. That means there might be multiple instances of the same service. That means that every lazy loaded module has it's own instance of the service. All eagerly loaded modules share one instance provided by the root module injector.
In the following example is the service used twice. Once within an eagerly loaded module (provided by root) and once in Lazy Module B (provided by its child injector).
The idea is similar to AngularJS '.factory()', evey times you use .factory injection, it creates a new instance.
相关文章
- [Angular 9] Improved Dependency Injection with the new providedIn scopes 'any' and 'platform'
- [Angular 8] Take away: Web Components with Angular Elements: Beyond the Basics
- [Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern
- [Angular] Send Data via HTTP using Angular HttpParams
- [Angular] Configure an Angular App at Compile Time with the Angular CLI
- [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
- [Angular] Angular Global Keyboard Handling With EventManager
- [Angular] Using the platform agnostic Renderer & ElementRef
- [Angular2 Form] Understand the Angular 2 States of Inputs: Pristine and Untouched
- [AngularJS] Hijacking Existing HTML Attributes with Angular Directives
- [Angular] Lazy Load CSS at runtime with the Angular CLI
- [Unit Testing] Configure the Angular CLI to use the Karma Mocha test reporter
- [Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe
- [Angular Directive] Write a Structural Directive in Angular 2
- [Angular 2] How To Debug An Angular 2 Application - Debugging via Augury or the Console
- [Immutable + AngularJS] Use Immutable .List() for Angular array
- [Angular 2] Exposing component properties to the template
- [AngularJS] Using the Angular scope $destroy event and method
- Angular 服务器端渲染场景里,服务器端和客户端渲染出的 HTML 源代码有可能不完全一致
- 【华为云技术分享】三大前端技术(React,Vue,Angular)探密(下)