Typescript Angular2-定义/注入单例

我定义了一个警报指令，如下所示：

import { Component } from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';
import { Alert } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'alert_directive',
  templateUrl: './shared/directives/alert/alert.html',
  directives: [Alert, CORE_DIRECTIVES]
})
export class AlertDirective {
  alerts:Array<Object> = [ ];

  closeAlert(i:number) {
    this.alerts.splice(i, 1);
  }

  addAlert(message: string, style: string) {
    this.alerts.push({msg: message, type: style, closable: true});
    console.log(this.alerts);
  }
}

这一切都起作用了，指令显示在与我的

app.html

文件相关的DOM中

这个

app.html

文件包含一些全局html（导航栏、页脚、警报指令）。我希望

alert\u指令

是一个单例，我可以更改

alerts

数组，以显示来自任何视图的警报消息，而无需将指令添加到每个视图中

因此，在另一个

登录组件中：

import {Component, ViewEncapsulation} from 'angular2/core';
import {AlertDirective} from '../../shared/directives/alert/alert';
@Component({
  selector: 'sign_in',
  templateUrl: './sign_in/components/sign_in.html',
  styleUrls: ['./sign_in/components/sign_in.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class SignInCmp {
  alertDirective: AlertDirective;
  constructor(alertDirective: AlertDirective) {
    this.alertDirective = alertDirective;
  }

  showAlert() {
    this.alertDirective.addAlert('test', 'warning');
  }
}

这里的问题是我正在
新建
AlertDirective
的一个新实例，因此我的
addAlert
方法将添加到我的新实例数组中，而不是添加到我的
应用程序中定义的现有实例中

如何创建一个作为单例的指令并将一个实例注入每个视图，然后调用该单例上的任何方法并影响每个注入的实例？
创建一个共享服务（仅在
引导（）中注册）并使用它在组件和您的
AlertDirective
之间进行通信，如中所示
该服务还可以包含一个
EventEmitter
，以便所有参与者都可以订阅传递的消息

@Injectable()
export class AlertService {
  command: EventEmitter = new EventEmitter();
}

@Component({
  selector: 'alert_directive',
  templateUrl: './shared/directives/alert/alert.html',
  directives: [Alert, CORE_DIRECTIVES]
})
export class AlertDirective {
  constructor(private alertService: AlertService) {
    alertService.commands.subscribe((command) => { doSomething();}
  }
  alerts:Array<Object> = [ ];

  closeAlert(i:number) {
    this.alerts.splice(i, 1);
  }

  addAlert(message: string, style: string) {
    this.alerts.push({msg: message, type: style, closable: true});
    console.log(this.alerts);
  }
}

@Component({
  selector: 'sign_in',
  templateUrl: './sign_in/components/sign_in.html',
  styleUrls: ['./sign_in/components/sign_in.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class SignInCmp {
  alertDirective: AlertDirective;
  constructor(alertService: AlertService) {
    this.alertService = alertService;
  }

  showAlert() {
    this.sharedService.command.next({text: 'test', title: 'warning'});
  }
}

bootstrap(AppComponent, [/* other providers */, AlertService]);

@Injectable（）
导出类警报服务{
命令：EventEmitter=neweventemitter（）；
}
@组成部分({
选择器：“警报指令”，
templateUrl:'./shared/directions/alert/alert.html'，
指令：[警报、核心指令]
})
导出类警报指令{
构造函数（专用alertService:alertService）{
订阅（（命令）=>{doSomething（）；}
}
警报：数组=[]；
closeAlert（一：编号）{
本.警报.拼接（i，1）；
}
addAlert（消息：字符串，样式：字符串）{
this.alerts.push（{msg:message，type:style，closable:true}）；
console.log（this.alerts）；
}
}
@组成部分({
选择器：“登录”，
templateUrl:“./sign_-in/components/sign_-in.html”，
样式URL:['./sign_-in/components/sign_-in.css']，
封装：视图封装。仿真
})
出口类标志{
alertDirective:alertDirective；
构造函数（alertService:alertService）{
this.alertService=alertService；
}
showarert（）{
next（{text:'test'，title:'warning'}）；
}
}
引导（AppComponent，[/*其他提供程序*/，AlertService]）；
创建一个共享服务（仅在
引导（）
中注册），并使用它在组件和您的
警报指令之间进行通信，如中所示
该服务还可以包含一个
EventEmitter
，以便所有参与者都可以订阅传递的消息

@Injectable()
export class AlertService {
  command: EventEmitter = new EventEmitter();
}

@Component({
  selector: 'alert_directive',
  templateUrl: './shared/directives/alert/alert.html',
  directives: [Alert, CORE_DIRECTIVES]
})
export class AlertDirective {
  constructor(private alertService: AlertService) {
    alertService.commands.subscribe((command) => { doSomething();}
  }
  alerts:Array<Object> = [ ];

  closeAlert(i:number) {
    this.alerts.splice(i, 1);
  }

  addAlert(message: string, style: string) {
    this.alerts.push({msg: message, type: style, closable: true});
    console.log(this.alerts);
  }
}

@Component({
  selector: 'sign_in',
  templateUrl: './sign_in/components/sign_in.html',
  styleUrls: ['./sign_in/components/sign_in.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class SignInCmp {
  alertDirective: AlertDirective;
  constructor(alertService: AlertService) {
    this.alertService = alertService;
  }

  showAlert() {
    this.sharedService.command.next({text: 'test', title: 'warning'});
  }
}

bootstrap(AppComponent, [/* other providers */, AlertService]);

@Injectable（）
导出类警报服务{
命令：EventEmitter=neweventemitter（）；
}
@组成部分({
选择器：“警报指令”，
templateUrl:'./shared/directions/alert/alert.html'，
指令：[警报、核心指令]
})
导出类警报指令{
构造函数（专用alertService:alertService）{
订阅（（命令）=>{doSomething（）；}
}
警报：数组=[]；
closeAlert（一：编号）{
本.警报.拼接（i，1）；
}
addAlert（消息：字符串，样式：字符串）{
this.alerts.push（{msg:message，type:style，closable:true}）；
console.log（this.alerts）；
}
}
@组成部分({
选择器：“登录”，
templateUrl:“./sign_-in/components/sign_-in.html”，
样式URL:['./sign_-in/components/sign_-in.css']，
封装：视图封装。仿真
})
出口类标志{
alertDirective:alertDirective；
构造函数（alertService:alertService）{
this.alertService=alertService；
}
showarert（）{
next（{text:'test'，title:'warning'}）；
}
}
引导（AppComponent，[/*其他提供程序*/，AlertService]）；
我想更好的方法是使用服务，而不是使组件单一化。我想更好的方法是使用服务，而不是使组件单一化