1
resposta

aula 6 -parte 7. Meu codigo não acusa erro mas nao mostra a mensagem

import { Component, Input } from '@angular/core';
import { Alert, AlertType } from './alert';
import { AlertService } from './alert.service';

@Component({
    selector: 'ap-alert',
    templateUrl: 'alert.component.html'
})
export class AlertComponent{

    @Input() timeout = 3000;
    alerts: Alert[] = [];

    constructor(private AlertService: AlertService){
        this.AlertService
        .getAlert()
        .subscribe(alert => {
            if(!alert){
                this.alerts = [];
                return;
            }
            this.alerts.push();
            setTimeout(() => this.removeAlert(alert), this.timeout);

        })
    }

    removeAlert(alertToRemove: Alert){
            this.alerts = this.alerts.filter(alert => alert != alertToRemove);
    }


    getAlertClass(alert: Alert){

            if(!alert) return '';

                switch(alert.alertType){
                    case AlertType.DANGER:
                        return 'alert alert-danger';
                    case AlertType.WARNING:
                        return 'alert alert-warning';
                    case AlertType.SUCESS:
                        return 'alert alert-sucess';
                    case AlertType.INFO:
                        return 'alert alert-info';

                }

    }


}

export class Alert{

constructor(
    public readonly alertType: AlertType,
    public readonly message: string
    ){}

}

export enum AlertType{ SUCESS, WARNING, DANGER, INFO }

// const alert = new Alert(AlertType.SUCESS, 'concluido'); // alert.message;

import { Component, Input } from '@angular/core';
import { Alert, AlertType } from './alert';
import { AlertService } from './alert.service';

@Component({
    selector: 'ap-alert',
    templateUrl: 'alert.component.html'
})
export class AlertComponent{

    @Input() timeout = 3000;
    alerts: Alert[] = [];

    constructor(private AlertService: AlertService){
        this.AlertService
        .getAlert()
        .subscribe(alert => {
            if(!alert){
                this.alerts = [];
                return;
            }
            this.alerts.push();
            setTimeout(() => this.removeAlert(alert), this.timeout);

        })
    }

    removeAlert(alertToRemove: Alert){
            this.alerts = this.alerts.filter(alert => alert != alertToRemove);
    }


    getAlertClass(alert: Alert){

            if(!alert) return '';

                switch(alert.alertType){
                    case AlertType.DANGER:
                        return 'alert alert-danger';
                    case AlertType.WARNING:
                        return 'alert alert-warning';
                    case AlertType.SUCESS:
                        return 'alert alert-sucess';
                    case AlertType.INFO:
                        return 'alert alert-info';

                }

    }


}



import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; import { Alert, AlertType } from './alert';

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

alertSubject: Subject<Alert> = new Subject<Alert>();

sucess(message: string){
    this.alert(AlertType.SUCESS, message);
}

warning(message: string){
    this.alert(AlertType.WARNING, message);
}

danger(message: string){
    this.alert(AlertType.DANGER, message);
}

info(message: string){
    this.alert(AlertType.INFO, message);
}


//colocar alert como privado e fazer os metodos
private alert(alertType: AlertType, message: string){
    this.alertSubject.next(new Alert(alertType, message));

}

getAlert(){
   return this.alertSubject.asObservable();
}

}

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { RequestInterceptor } from './auth/request.interceptor';
import { FooterComponent } from './footer/footer.component';
import { AlertModule } from '../shared/alerts/alert.module';

@NgModule({
    declarations: [
        HeaderComponent,
        FooterComponent
    ],
    exports: [
        HeaderComponent,
        FooterComponent
    ],
    imports: [
        CommonModule,
        RouterModule,
        AlertModule
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: RequestInterceptor,
            multi: true
        }
    ]
})
export class CoreModule { }

{{ alert.message }}

```

`

1 resposta

Boa noite, Alessandro! Como vai?

Vc poderia colocar o seu código no github e compartilhar o link aqui? Assim ficará mais fácil de poder reproduzir o que está acontecendo e tentar te ajudar!