Angular 4 - Serviços

Neste capítulo, discutiremos os serviços do Angular 4.

Podemos nos deparar com uma situação em que precisamos que algum código seja usado em todos os lugares da página. Pode ser para conexão de dados que precisa ser compartilhada entre componentes, etc. Os serviços nos ajudam a conseguir isso. Com serviços, podemos acessar métodos e propriedades em outros componentes em todo o projeto.

Para criar um serviço, precisamos fazer uso da linha de comando. O comando para o mesmo é -

C:\projectA4\Angular 4-app>ng g service myservice
installing service
   create src\app\myservice.service.spec.ts
   create src\app\myservice.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

   C:\projectA4\Angular 4-app>

Os arquivos são criados na pasta do aplicativo da seguinte forma -

A seguir estão os arquivos criados na parte inferior - myservice.service.specs.ts e myservice.service.ts.

myservice.service.ts

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

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

Aqui, o módulo injetável é importado do @angular/core. Contém o@Injectable método e uma classe chamada MyserviceService. Vamos criar nossa função de serviço nesta classe.

Antes de criar um novo serviço, precisamos incluir o serviço criado no pai principal app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

Importamos o Serviço com o nome da classe e a mesma classe é usada nos provedores. Vamos agora voltar para a classe de serviço e criar uma função de serviço.

Na classe de serviço, criaremos uma função que exibirá a data de hoje. Podemos usar a mesma função no componente pai principalapp.component.ts e também no novo componente new-cmp.component.ts que criamos no capítulo anterior.

Vamos agora ver como a função aparece no serviço e como usá-la nos componentes.

import { Injectable } from '@angular/core';
@Injectable()
export class MyserviceService {
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

No arquivo de serviço acima, criamos uma função showTodayDate. Agora retornaremos a nova Date () criada. Vamos ver como podemos acessar essa função na classe do componente.

app.component.ts

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

o ngOnInitfunção é chamada por padrão em qualquer componente criado. A data é obtida do serviço conforme mostrado acima. Para obter mais detalhes do serviço, precisamos primeiro incluir o serviço no componentets Arquivo.

Exibiremos a data no .html arquivo como mostrado abaixo -

{{todaydate}}
<app-new-cmp></app-new-cmp> 
// data to be displayed to user from the new component class.

Vamos agora ver como usar o serviço no novo componente criado.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponent = "Entered in new component created";
   constructor(private myservice: MyserviceService) {}

   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

No novo componente que criamos, precisamos primeiro importar o serviço que queremos e acessar os métodos e propriedades do mesmo. Por favor, veja o código destacado. A data de hoje é exibida no html do componente da seguinte forma -

<p>
   {{newcomponent}}
</p>
<p>
   Today's Date : {{todaydate}}
</p>

O seletor do novo componente é usado no app.component.htmlArquivo. O conteúdo do arquivo html acima será exibido no navegador conforme mostrado abaixo -

Se você alterar a propriedade do serviço em qualquer componente, o mesmo será alterado em outros componentes. Vamos agora ver como isso funciona.

Vamos definir uma variável no serviço e usá-la no pai e no novo componente. Vamos mudar novamente a propriedade no componente pai e ver se a mesma é alterada no novo componente ou não.

No myservice.service.ts, criamos uma propriedade e usamos a mesma em outro pai e no novo componente.

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

@Injectable()
export class MyserviceService {
   serviceproperty = "Service Created";
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

Vamos agora usar o servicepropertyvariável em outros componentes. Noapp.component.ts, estamos acessando a variável da seguinte maneira -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      console.log(this.myservice.serviceproperty);
      this.myservice.serviceproperty = "component created"; // value is changed.
      this.componentproperty = this.myservice.serviceproperty;
   }
}

Agora, buscaremos a variável e trabalharemos no console.log. Na próxima linha, vamos alterar o valor da variável para “component created”. Faremos o mesmo emnew-cmp.component.ts.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})

export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponentproperty;
   newcomponent = "Entered in newcomponent";
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.newcomponentproperty = this.myservice.serviceproperty;
   }
}

No componente acima, não estamos alterando nada, mas atribuindo diretamente a propriedade à propriedade do componente.

Agora, quando você executá-lo no navegador, a propriedade do serviço será alterada, pois o valor dela é alterado em app.component.ts e o mesmo será exibido para o new-cmp.component.ts.

Verifique também o valor no console antes de ser alterado.