@Inject i @Injectable
@ Inject
i@ Injectable
to dekoratory wprowadzone przez DI.
@Inject()
@Inject ()
jest mechanizmem informującym Angular, że a parametr musi zostać wstrzyknięty. Może być używany w następujący sposób:
import { Component, Inject } from '@angular/core';
import { ChatWidget } from '../components/chat-widget';
@Component({
selector: 'app-root',
template: `Encryption: {{ encryption }}`
})
export class AppComponent {
encryption = this.chatWidget.chatSocket.encryption;
constructor(@Inject(ChatWidget) private chatWidget) { }
}
W powyższym kodzie dekorators @Inject(ChatWidget)
informuje, że chatWidget
jest własnością klasy AppComponent stworzoną na podstawie klasy ChatWidget
To ważne, że jest to referencja do
singletonu (pojedyncza instancja klasy). Nie używamy ChatWidget
do tworzenia instancji, Angular
robi to dla nas za kulisami.
Aby jeszcze uprościć kodowanie, potrzebujemy jawnie zapisać @ Inject
tylko do typów prostych. Obiekty wpisane na liście providers modułu będą wstrzykiwane przez Angular jeśli zdeklarujemy je w parametrach konstruktora::
import { Component } from '@angular/core';
import { ChatWidget } from '../components/chat-widget';
@Component({
selector: 'app',
template: `Encryption: {{ encryption }}`
})
export class App {
encryption = this.chatWidget.chatSocket.encryption;
constructor(private chatWidget: ChatWidget) { }
}
Zobacz przykład [020]
@Injectable()
@Injectable ()
informuje Angulara, że klasa może coś być wstrzykiwana.@Injectable ()
nie jest wymagane, jeśli klasa ma inne dekoratory Angulara. Jednak dobrą praktyką jest dekorowanie klas do wstrzykiwania, ponieważ jest to bardziej czytelne.
Oto przykład ChatWidget
oznaczony@ Injectable
:
import { Injectable } from '@angular/core';
import { AuthService } from './auth-service';
import { AuthWidget } from './auth-widget';
import { ChatSocket } from './chat-socket';
@Injectable()
export class ChatWidget {
constructor(
public authService: AuthService,
public authWidget: AuthWidget,
public chatSocket: ChatSocket) { }
}