text 角形烤面包小吃吧

Posted 2021-04-28

<i class="material-icons pullfloat-right" style="font-size: 18px;color: white" (click)="close()">close</i>
<div class="toast">
  <div class="toast-icon">
    <i class="far fa-times-circle" *ngIf="data?.type=='Error'"></i>
    <i class="far fa-check-circle" *ngIf="data?.type=='Success'"></i>
    <i class="fas fa-exclamation-triangle" *ngIf="data?.type=='Warning'"></i>
    <i class="fas fa-info-circle" *ngIf="data?.type=='Info'"></i>
  </div>
  <div class="toast-message">
    <div class="toast-title">{{data?.type}}</div>
    <div class="toast-content">{{data?.message}}</div>
  </div>
</div>

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material';

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

  constructor(private snackBar: MatSnackBar,
    @Inject(MAT_SNACK_BAR_DATA) public data: any) { }

  ngOnInit() {
  }

  close():void{
    this.snackBar.dismiss();
  }
}

  constructor(
        private http: Http, 
        private httpClient: HttpClient,
        private authService: AuthService,
        private snackBar: MatSnackBar
    ) { }
    
  implementToast = (message: string, type: 'Success' | 'Error' | 'Info' | 'Warning') => {
  this.snackBar.openFromComponent(ToastComponent, 
      {duration: 1500,
      data: { message: message, type: type },
      horizontalPosition: "right",
      verticalPosition: "top",
      panelClass: type + "Toast"});
    }