Entrar Ainda não tem acesso?
5
respostas

Angular erro ao chamar modal no service

por Estudante
| 292k xp | 95 posts

Ola, Eu tenho um serviço 'tela-alerta.service.ts'

@Injectable()
export class TelaAlertaService {

    alertaSubject: Subject<Alerta> = new Subject<Alerta>();

    constructor( public modalService: BsModalService ) { }

    abriTela() { 
        const modalRef = this.modalService.show(AlertaComponent, {class: 'modal-sm'});
    }




    success(messagem: string){

        this.abriTela();
        this.alerta(AlertaType.SUCCESS, messagem, "assets/icons/alert-icon-success.png");  
    }

    warning(messagem: string){
        this.alerta(AlertaType.WARNING, messagem, "assets/icons/alert-icon-success.png");
    }

    info(messagem: string){
        this.alerta(AlertaType.INFO, messagem, "assets/icons/alert-icon-cancel.png");
    }

    danger(messagem: string){
        this.alerta(AlertaType.DANGER, messagem, "assets/icons/alert-icon-cancel.png");
    }






    private alerta(alertaType: AlertaType, messagem: string, icone: string){
        this.alertaSubject.next(new Alerta(alertaType, messagem, icone));
    }

    getAlerta(){
       return this.alertaSubject.asObservable();
    }
}

e tenho o 'alerta.component.ts

import { Component, Input} from '@angular/core';
import { AlertaService } from 'app/shared/components/alerta/alerta.service';
import { Alerta, AlertaType } from 'app/shared/components/alerta/alerta';
import { TelaAlertaService } from 'app/services/tela-alerta.service';


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

export class AlertaComponent{

    @Input() mensagem: String = 'ERROR';
    @Input() icone: String = 'ERROR';

    constructor(public tela: TelaAlertaService) {

        console.log("chamou contrutor alertacomponent");

        /* this.telaAlertaService.getAlerta().subscribe(alerta =>{
            this.mensagem = alerta.messagem;
            this.icone = alerta.icone;
            console.log(alerta.messagem);
       }) */
    }


    getAlertaClass(alerta: Alerta){

        if(!alerta) return 'alert alert-danger';

        switch (alerta.alertaType){

            case AlertaType.DANGER:
                return 'alert alert-danger';
            case AlertaType.SUCCESS:
                return 'alert alert-success';
            case AlertaType.INFO:
                return 'alert alert-info'; 
            case AlertaType.WARNING:
                return 'alert alert-warning';      
        }
    }
}

Estou passando no construtor do "AlertaComponent" o Serviço para eu manipular e obter os dados. Mas me fornece o seguinte erro no console da IDE

WARNING in Circular dependency detected: src\app\services\tela-alerta.service.ts -> src\app\shared\components\alerta\alerta.component.ts -> src\app\services\tela-alerta.service.ts

e no console do browser aparece "Error: Can't resolve all parameters for AlertaComponent: (?)."

se eu tirar o parâmetro de serviço do construtor ao clicar no botão ele abre minha tela modal perfeitamente, mas se eu passa o serviço ae começa a dar esse problema e a aplicação não roda. Só que se eu não passar o serviço no construtor como vou ter acesso aos dados do serviço? Como irei passa os dados para "AlertaComponent" ??

Eu já pesquisei em tudo que é lugar e não acho a solução, sou novo em programação com Angular.

Alguém pode me ajudar?

5 respostas
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Fala aí Diego, tudo bem? Esse problema acontece porque provavelmente você tem um serviço que depende um do outro, por exemplo:

No seu cenário, o serviço TelaAlertaService depende do BsModalService, se por exemplo o seu BsModalService depender de TelaAlertaService, isso será uma dependência circular.

Repare que um depende do outro, então para criar A precisa injetar B e para criar B precisa injetar A.

Dê uma verifica em questões como essa.

Espero ter ajudado.

por Estudante
| 292k xp | 95 posts

Boa noite,

Você poderia dar uma exemplo disso por gentileza, como eu consigo num servico chamar um component que tem modal e executar no component o servico q desejo?

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

O que você pode fazer é emitir um evento, dai dentro do componente você se inscreve nesse evento e sempre que o mesmo acontecer faça algo, mais ou menos assim:

import { Injectable } from '@angular/core'

import { EMPTY, Observable, Subject, of } from 'rxjs'
import { switchMap } from 'rxjs/operators'

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

    private readonly event: Subject<any> = new Subject<any>()

    public emit(topic, data = {}): void {
        this.event.next({ topic, data })
    }

    public listen(topic): Observable<any> {
        return this.event
            .pipe(switchMap(data => {
                if (topic === data.topic) {
                    return of(data)
                }
                return EMPTY
            }))
    }

}

Dentro do seu serviço, você faz o emit:

this.eventService.emit('ABRIR_MODAL')

Dai no componente, você faz o listen:

this.eventService.listen('ABRIR_MODAL').subscribe(ALGUMA_FUNCAO)

Espero ter ajudado.

por Estudante
| 292k xp | 95 posts

O problema é esse, para eu abrir um modal eu tenho que fazer o seguinte comando conforme demonstrei

const modalRef = this.modalService.show(AlertaComponent, {class: 'modal-sm'});

No meu alertaComponent para eu manipular e o liste.. eu preciso receber como parametro o AlertaService. Só que por abrir o modal no serviço qd recebo no construtor do component o serviço ele não funciona e da esses erros.

Existe alguma outra forma de abrir modal?

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Você não vai passar o AlertaComponent, porque dentro dele vai se inscrever no evento através do .listen no ngOnInit.

Espero ter ajudado.