LuanDantas
3/2/2018 - 11:53 AM

Serviços - Injeção de Dependência (DI) + como usar um serviço em um componente.

Serviços - Injeção de Dependência (DI) + como usar um serviço em um componente.

  • Digamos que uma Classe A precisa de uma instância de uma outra classe.
<h5>Lista de cursos</h5>

<ul>
    <li *ngFor="let curso of cursos">
        {{ curso }}
    </li>
</ul>

TypeScript

import { CursosService } from './cursos.service';

export class CursosComponent implements OnInit {

    cursos: string[] = [];
    cursosService: CursosService;

    ou 
    //cursosService: CursosService;

    constructor(_cursosService: CursosService) {
        this.cursosService = _cursosService;
    }

    ou 

    constructor(private cursosService: CursosService) {
        //this.cursosService = _cursosService;
    }

    ngOnInit() {
        this.cursos = this.cursosService.getCursos();
    }

}

Service

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

// Decorator para injetar a classe
@Injectable()
export class CursosService {

    getCursos() {
        return ['Angular 2', 'Java', 'Phonegap'];
    }

}

Lembrando que, a classe de serviço deverá ser informado no app.module dentro de providers: [].