Angular 2 - injeção de dependência

A injeção de dependência é a capacidade de adicionar a funcionalidade de componentes em tempo de execução. Vamos dar uma olhada em um exemplo e nas etapas usadas para implementar a injeção de dependência.

Step 1- Crie uma classe separada que tenha o decorador injetável. O decorador injetável permite que a funcionalidade dessa classe seja injetada e usada em qualquer módulo Angular JS.

@Injectable() 
   export class classname {  
}

Step 2 - Em seguida, no módulo appComponent ou no módulo em que deseja usar o serviço, é necessário defini-lo como um provedor no decorador @Component.

@Component ({  
   providers : [classname] 
})

Vejamos um exemplo de como fazer isso.

Step 1 - Crie um ts arquivo para o serviço chamado app.service.ts.

Step 2 - Coloque o seguinte código no arquivo criado acima.

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

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

Os seguintes pontos precisam ser observados sobre o programa acima.

• O decorador injetável é importado do módulo angular / núcleo.

• Estamos criando uma classe chamada appService que é decorada com o decorador Injectable.

• Estamos criando uma função simples chamada getApp que retorna uma string simples chamada “Hello world”.

Step 3 - No arquivo app.component.ts coloque o seguinte código.

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

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

Os seguintes pontos precisam ser observados sobre o programa acima.

• Primeiro, estamos importando nosso módulo appService no módulo appComponent.

• Então, estamos cadastrando o serviço como provedor neste módulo.

• No construtor, definimos uma variável chamada _appService do tipo appService para que possa ser chamada em qualquer lugar no módulo appComponent.

• Por exemplo, no lifecyclehook ngOnInit, chamamos a função getApp do serviço e atribuímos a saída à propriedade value da classe AppComponent.

Salve todas as alterações de código e atualize o navegador, você obterá a seguinte saída.