Jaki jest cel dostarczenia z dekoratorem iniekcyjnym podczas generowania usług w Angular 6?

Podczas generowania usług w Angular CLI, dodaje dodatkowe metadane z właściwością „dostarczone w” z domyślną wartością „root” dla dekoratora Injectable.

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

Co dokładnie zapewnia? Zakładam, że oznacza to udostępnienie usługi jako pojedynczej usługi typu „globalnego” dla całej aplikacji, jednak czy deklarowanie takich usług w tablicy dostawców AppModule nie byłoby czystsze?

AKTUALIZACJA:

Dla wszystkich innych, poniższy akapit również zawiera inne dobre wyjaśnienie, w szczególności, jeśli chcesz świadczyć usługi tylko dla modułu funkcji.

Jest teraz nowy, zalecany sposób rejestracji dostawcy bezpośrednio w @Injectable()dekoratorze przy użyciu nowego providedIn atrybutu. Akceptuje 'root'jako wartość lub dowolny moduł aplikacji. Kiedy używasz 'root', Twój injectablebędzie zarejestrowany jako singleton w aplikacji i nie musisz go dodawać do dostawców modułu głównego. Podobnie, jeśli używasz providedIn: UsersModule, injectablejest zarejestrowany jako dostawca UsersModulebez dodawania go do providersmodułu. ”- https://blog.ninja-squad.com/2018/05/04/what-is-new-angular -6 /

AKTUALIZACJA 2:

Po dalszych badaniach zdecydowałem, że warto mieć providedIn: 'root'

Jeśli chcesz skorzystać z provideusługi w jakimkolwiek module innym niż moduł główny, lepiej użyj providerstablicy w dekoratorach modułu funkcji, w przeciwnym razie będziesz nękany cyklicznymi zależnościami. Ciekawe dyskusje do przeprowadzenia tutaj - https://github.com/angular/angular-cli/issues/10170

w przypadku korzystania z providedIn, element iniekcyjny jest rejestrowany jako dostawca modułu bez dodawania go do dostawców modułu.

Z Docs

Sama usługa jest klasą wygenerowaną przez CLI i ozdobioną znakiem @Injectable. Domyślnie ten dekorator jest skonfigurowany z właściwością providedIn, która tworzy dostawcę dla usługi. W tym przypadku atrybut providedIn: „root” określa, że ​​usługa powinna być świadczona w iniektorze root.

providedIn: 'root' to najłatwiejszy i najbardziej efektywny sposób świadczenia usług od czasu Angular 6:

1. Usługa będzie dostępna dla całej aplikacji jako singleton bez konieczności dodawania jej do tablicy dostawców modułu (np. Angular <= 5).
2. Jeśli usługa jest używana tylko w module ładowanym z opóźnieniem, będzie ładowana z opóźnieniem w tym module
3. Jeśli nigdy nie zostanie użyty, nie zostanie uwzględniony w kompilacji (drzewo potrząśnie).

Aby uzyskać dalsze informacje, rozważ przeczytanie dokumentacji i często zadawanych pytań dotyczących NgModule

Przy okazji:

1. Jeśli nie chcesz, aby singleton obejmujący całą aplikację, zamiast tego użyj tablicy składnika dostawcy.
2. Jeśli chcesz ograniczyć zakres, aby żaden inny programista nigdy nie używał Twojej usługi poza określonym modułem, providerszamiast tego użyj tablicy NgModule.

Z Dokumentów

Co to jest dekorator iniekcyjny?

Oznacza klasę jako dostępną dla wtryskiwacza do utworzenia.

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

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

Sama usługa jest klasą wygenerowaną przez CLI i udekorowaną za pomocą @Injectable ().

Co dokładnie zapewnia?

Określa, które wtryskiwacze będą dostarczać wstrzykiwacz, kojarząc go z @NgModule lub innym typem wtryskiwacza, albo określając, że ten wstrzykiwacz powinien być dostarczony we wtryskiwaczu „root”, który w większości aplikacji będzie wtryskiwaczem na poziomie aplikacji.

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

providedIn: 'root'

Kiedy udostępniasz usługę na poziomie głównym, Angular tworzy pojedyncze, współużytkowane wystąpienie usługi i wstrzykuje je do dowolnej klasy, która o to prosi. Zarejestrowanie dostawcy w metadanych @Injectable () umożliwia również Angularowi optymalizację aplikacji przez usunięcie usługi ze skompilowanej aplikacji, jeśli nie jest używana.

providedIn: Moduł

Możliwe jest również określenie, że usługa powinna być świadczona w określonym @NgModule. Na przykład, jeśli nie chcesz, aby usługa była dostępna dla aplikacji, chyba że zaimportują utworzony przez Ciebie moduł, możesz określić, że usługa ma być świadczona w module

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

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

Ta metoda jest preferowana, ponieważ umożliwia potrząsanie drzewem (potrząsanie drzewem jest krokiem w procesie budowania, który usuwa nieużywany kod z bazy kodu ) usługi, jeśli nic jej nie wstrzykuje.

W przypadku braku możliwości określenia w serwisie, który moduł ma to świadczyć, możesz również zadeklarować dostawcę usługi w ramach modułu:

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

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

providedIn informuje Angular, że iniektor główny jest odpowiedzialny za utworzenie wystąpienia Twojej usługi. Usługi świadczone w ten sposób są automatycznie udostępniane całej aplikacji i nie muszą być wymienione w żadnym module.

Klasy usług mogą działać jako ich własne dostawcy, dlatego zdefiniowanie ich w dekoratorze @Injectable to jedyna rejestracja, jakiej potrzebujesz.

Zgodnie z Documentation:

Zarejestrowanie dostawcy w metadanych @Injectable () umożliwia również Angularowi optymalizację aplikacji przez usunięcie usługi ze skompilowanej aplikacji, jeśli nie jest używana.

zobacz Doskonałe wyjaśnienie @Nipuna,

Chciałbym go rozszerzyć o przykłady.

jeśli używasz dekoratora do wstrzykiwań bez providedinwłaściwości, takich jak,

@Injectable()

wtedy musiałbyś wpisać nazwę usługi w odpowiedniej providerstablicy modułu .

lubię to;

data.service.ts ↴

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

@Injectable()
export class DataService {
    constructor() {}

    // Code . . .
}

app.module.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 {}

Ale jeśli używasz providedIn: 'root', w ten sposób:

data.service.ts ↴

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

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

    // Code . . .
}

Wtedy nasz moduł wyglądałby tak:

app.module.ts ↴

import { AppComponent } from './app.component';
import { DataService } from './core/data.service';

@NgModule({
    declarations: [AppComponent],
    providers: [],
    imports: [...],
    bootstrap: [AppComponent],
})
export class AppModule {}

zobaczyć ja did't dodać DataServicew providerstablicy ten czas, bo to nie jest potrzebne.