Angular 2 - Serviços
Um serviço é usado quando uma funcionalidade comum precisa ser fornecida a vários módulos. Por exemplo, poderíamos ter uma funcionalidade de banco de dados que poderia ser reutilizada entre vários módulos. E, portanto, você pode criar um serviço que possa ter a funcionalidade de banco de dados.
As etapas principais a seguir devem ser realizadas ao criar um serviço.
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. A seguir estão as etapas envolvidas.
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 devem 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: 'demo-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 devem ser observados sobre o programa acima.
Primeiro, importamos nosso módulo appService no módulo appComponent.
Em seguida, registramos 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.
Como exemplo, no lifecyclehook ngOnInit, chamamos a função getApp do serviço e atribuímos a saída à propriedade value da classe AppComponent.
Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.