Angular 2-在服务中创建警报

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

@Injectable()
export class AlertService {
  alerts: string[] = [];

  addAlert(alert: string) {
    this.alerts.push(alert);
  }

  clearAlerts() {
    this.alerts = [];
  }
}

import { Component } from '@angular/core';
import { AlertService } from './alert.service';

@Component({
  selector: 'app-alert',
  template: `
    <div *ngFor="let alert of alertService.alerts">
      {{ alert }}
    </div>
  `
})
export class AlertComponent {
  constructor(public alertService: AlertService) {}
}

import { Component } from '@angular/core';
import { AlertService } from './alert.service';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="addAlert()">Add Alert</button>
    <button (click)="clearAlerts()">Clear Alerts</button>
    <app-alert></app-alert>
  `,
  providers: [AlertService]
})
export class ExampleComponent {
  constructor(private alertService: AlertService) {}

  addAlert() {
    this.alertService.addAlert('This is an alert message.');
  }

  clearAlerts() {
    this.alertService.clearAlerts();
  }
}