Angular 4 - Serviços

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

Podemos encontrar uma situação em que precisamos de algum código para ser usado em qualquer lugar 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 os 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 maneira -

Arquivos na pasta do aplicativo

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 . Ele contém o método @Injectable e uma classe chamada MyserviceService . Criaremos nossa função de serviço nesta classe.

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

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 { }

Nós 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 principal app.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 se parece no serviço e como usá-lo 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 component.

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();
   }
}

A função ngOnInit é chamada por padrão em qualquer componente criado. A data é buscada no serviço, como mostrado acima. Para buscar mais detalhes do serviço, precisamos primeiro incluir o serviço no arquivo ts do componente.

Mostraremos a data no arquivo .html, 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 componente html da seguinte maneira -

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

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

Novo componente de saída criado

Se você alterar a propriedade do serviço em qualquer componente, o mesmo também 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. Mudaremos novamente a propriedade no componente pai e veremos se o mesmo foi alterado no novo componente ou não.

Em myservice.service.ts , criamos uma propriedade e usamos a mesma em outro pai e 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 a variável serviceproperty em outros componentes. Em app.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, alteraremos o valor da variável para " componente criado ". Faremos o mesmo em new-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ê a executar no navegador, a propriedade service será alterada, pois o valor dela será alterado em app.component.ts e o mesmo será exibido para new-cmp.component.ts .

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

Saída do console