Componente para paginação em angular 6


(Guilhermecostalopes) #1

Estou fazendo assim:

paginacao.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class PaginacaoService {

  public static modelo = new EventEmitter<any>();
  public static primeiraPagina = new EventEmitter<any>();
  public static paginaAnterior = new EventEmitter<any>();
  public static proximaPagina = new EventEmitter<any>();
  public static ultimaPagina = new EventEmitter<any>();
  public static paginaAtual = new EventEmitter<any>();
  public static totalPagina = new EventEmitter<any>();
  public static totalRegistros = new EventEmitter<any>();
}

paginacao.component.ts

import { Component, OnInit } from '@angular/core';

import { PaginacaoService } from '../../../service/paginacao/paginacao.service';

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

  /**
   * variáveis de paginação
   */
  public totalPagina: number;
  public totalRegistros: number;
  public paginaAtual: number;

  public modelo: any;

  constructor(
    protected paginacaoService: PaginacaoService
  ) {}

  ngOnInit() {
    this.preencherVariaveisComponente();
  }

  private preencherVariaveisComponente() {
    PaginacaoService.paginaAtual.subscribe(
      paginaAtual => {
        this.paginaAtual = paginaAtual;
      }
    );
  }
}

paginacao.component.html

Página <b>{{paginaAtual}}</b> de <b>{{totalPagina}}</b> - 
          Total de Registros: <b>{{totalRegistros}}</b>

A variável nunca é atualizada, mesmo o serviço trazer o valor, conforme imagem:

paginaAtual

Se preencho valor assim:

this.paginaAtual = 1;
    PaginacaoService.paginaAtual.subscribe(
      paginaAtual => {
        this.paginaAtual = paginaAtual;
      }
    );

Funciona, mas se o valor vier pelo servico, conforme imagem, não funciona. O que pode ser ?