Inference dependency injection in Typescript - Angular 6

0

I'm doing the front end of a project using Angular 6, however I'm new to both Angular and Typescript and I'm trying to use the Typescript interfaces as in Java, injecting them to use the methods and tals, the problem is the following:

* I have an interface with signing the methods;

* I have a class that implements this interface and has the methods;

* I have a component that calls the interface in Contructor so private myInterface: MyInterface and at least in Java what I would do is make this attribute receive a new object from class that implements this interface ( this.myInterface = new ObjetoQueImplementa(); ) and could use its methods normally, but in Typescript is different, and I even saw articles and some examples that I found there with a certain injection of dependence as in Java but none of them came to help me, I'll leave my code here I hope someone can get me help here.

Interface:

import {Agenda} from "../model/agenda";
import {Observable} from "rxjs/index";

export interface AgendaCommandRepository {

  insert(agenda: Agenda): Observable<Agenda>;

  update(agenda: Agenda): Observable<Agenda>;

  deleteAgenda(id: number): Observable<number>;
}

Class that implements the interface:

import { Injectable } from '@angular/core';
import { AgendaService } from '../service/agenda-command.service';
import { AgendaCommandValidator } from '../validator/agenda-command-
validator';
import { Agenda } from '../../model/agenda';
import { Observable } from 'rxjs/index';

@Injectable({
  providedIn: 'root'
})
export class AgendaCommandRepositoryImpl implements AgendaCommandRepository {

  constructor(private service: AgendaService, private validator: 
AgendaCommandValidator) { }

  insert(agenda: Agenda): Observable<Agenda> {

    if (this.validator.validaInsert(agenda)) {
      return this.service.insert(agenda);
    }

    return null;
  }

  update(agenda: Agenda): Observable<Agenda> {

    if (this.validator.validaUpdate(agenda)) {
      return this.service.update(agenda);
    }

    return null;
  }

  deleteAgenda(id: number): Observable<number> {

    if (this.validator.validaDelete(id)) {
      return this.service.deleteAgenda(id);
    }

    return null;
  }
}

import {Component, Inject, OnInit} from '@angular/core';
import { AgendaCommandRepositoryImpl } from "../../repository/agenda-
command-repository-impl";
import { Agenda } from "../../../model/agenda";
import { AgendaQueryRepository } from "../../../query/repository/agenda-
query-repository";
import { ActivatedRoute } from '@angular/router';
import { AgendaCommandRepository } from "../../agenda-command-repository";

@Component({
  selector: 'app-agenda',
  templateUrl: './agenda-command.component.html',
  styleUrls: ['./agenda-command.component.css']
})
export class AgendaCommandComponent implements OnInit {

  agenda: Agenda;
  id: number;
  titulo: string; // para teste

  constructor(private repository: AgendaCommandRepository, private 
queryRepository: AgendaQueryRepository, private route: ActivatedRoute) {}

  ngOnInit() {
    this.id = +this.route.snapshot.paramMap.get('id');

    if (this.id) {
      this.queryRepository.findById(this.id).subscribe(agenda => this.agenda 
= agenda);
      this.titulo = "Edição";

    } else {
      this.agenda = new Agenda();
      this.titulo = "Cadastro";
    }
  }

  salvar() {

    if (this.id) {
      this.repository.update(this.agenda).subscribe();

    } else {
      this.repository.insert(this.agenda).subscribe();
    }
  }

}
    
asked by anonymous 19.10.2018 / 20:44

1 answer

0

With the help of @GuilhermeCostamilam I found the answer, nn looks so beautiful, but to use it, there's the code:

Interface:

import {Agenda} from "../model/agenda";
import {Observable} from "rxjs/index";

export interface AgendaCommandRepository {

  insert(agenda: Agenda): Observable<Agenda>;

  update(agenda: Agenda): Observable<Agenda>;

  deleteAgenda(id: number): Observable<number>;
}

Class that implements the interface:

import { Injectable } from '@angular/core';
import { AgendaService } from '../service/agenda-command.service';
import { AgendaCommandValidator } from '../validator/agenda-command-validator';
import { Agenda } from '../../model/agenda';
import { Observable } from 'rxjs/index';

@Injectable({
  providedIn: 'root'
})
export class AgendaCommandRepositoryImpl implements AgendaCommandRepository {

  private service: AgendaService;
  private validator: AgendaCommandValidator;

  constructor(serviceImpl: AgendaServiceImpl, validatorImpl: AgendaCommandValidatorImpl) {
      this.service = serviceImpl;
      this.validator = validatorImpl;
  }

  insert(agenda: Agenda): Observable<Agenda> {

    if (this.validator.validaInsert(agenda)) {
      return this.service.insert(agenda);
    }

    return null;
  }

  update(agenda: Agenda): Observable<Agenda> {

    if (this.validator.validaUpdate(agenda)) {
      return this.service.update(agenda);
    }

    return null;
  }

  deleteAgenda(id: number): Observable<number> {

    if (this.validator.validaDelete(id)) {
      return this.service.deleteAgenda(id);
    }

    return null;
  }
}

Component:

import {Component, Inject, OnInit} from '@angular/core';
import { AgendaCommandRepositoryImpl } from "../../repository/agenda-command-repository-impl";
import { Agenda } from "../../../model/agenda";
import { AgendaQueryRepository } from "../../../query/repository/agenda-query-repository";
import { ActivatedRoute } from '@angular/router';
import { AgendaCommandRepository } from "../../agenda-command-repository";

@Component({
  selector: 'app-agenda',
  templateUrl: './agenda-command.component.html',
  styleUrls: ['./agenda-command.component.css']
})
export class AgendaCommandComponent implements OnInit {

  agenda: Agenda;
  id: number;
  titulo: string; // para teste
  private repository: AgendaCommandRepository;
  private queryRepository: AgendaQueryRepository;

  constructor(repositoryImpl: AgendaCommandRepositoryImpl, queryRepositoryImpl: AgendaQueryRepositoryImpl, private route: ActivatedRoute) {
  this.repository = repositoryImpl;
  this.queryRepository = queryRepositoryImpl;
  }

  ngOnInit() {
    this.id = +this.route.snapshot.paramMap.get('id');

    if (this.id) {
      this.queryRepository.findById(this.id).subscribe(agenda => this.agenda = agenda);
      this.titulo = "Edição";

    } else {
      this.agenda = new Agenda();
      this.titulo = "Cadastro";
    }
  }

  salvar() {

    if (this.id) {
      this.repository.update(this.agenda).subscribe();

    } else {
      this.repository.insert(this.agenda).subscribe();
    }
  }

}

Since Angular 6 already does the class injection for me, I just needed to make the Angular inject the Impl (q is the code) and get the interface to receive Impl, that's it vlw flw!

    
22.10.2018 / 02:03