typescript NG-警报

Posted 2021-05-21

@Component({
  selector:'ng-alerts',
  template:`<div class="dock-header" [ngClass]="options.place +' dock-size-'+options.size">
              <div single-alert *ngFor="let alert of alerts" [alert]="alert" (onClosed)="closed()">
              </div>
            </div>`,
  styleUrls:['./ng-alerts.css'],
  encapsulation:ViewEncapsulation.None
})

export class NgAlertsComponent implements OnInit{

  options:any={};
  alerts:any=[];
  queue:any=[];
  private _countsAlerts=0;

  constructor(private alertsService:NgAlertsService){
  }

  ngOnInit(){
    this.alertsService.eventAlerts.subscribe((alert)=>{
      if(alert){
        if(this._countsAlerts < this.options.limit){
          this.alerts.unshift(alert);
          this._countsAlerts++;
        }else{
          this.queue.push(alert);
        }
      }
    });

    this.alertsService.eventOptions.subscribe((options:AlertModel)=>{
      if(options){
        this.options=options;
      }
    })
  }

  closed(e,alert){
    this._countsAlerts--;
    if(this.queue.length){
      this.alerts.unshift(this.queue.shift());
      this._countsAlerts++;
    }
  }
}