Angular集成提示框

[deepthan]

集成提示框

此为一个提示框，可设置内容和显示时间等。

地址 ： https://www.npmjs.com/package/angular2-toaster

方法： npm install angular2-toaster --save

• HTML :

  <toaster-container [toasterconfig]="toasterconfig"></toaster-container>

• ts :

  1. 在所用模块内引入包

     import { ToasterModule } from '@angular2-toaster';
     imports: [
     ToasterModule 
     ]

  2. 引入里面需要用的服务

import { ToasterService , ToasterConfig } from 'angular2-toaster';

参数名称	可设定值
ToasterService	传进去内容的服务，可以设置
type	"success" 、 "error" 分别对应不同的样式
title	标题
body	内容
ToasterConfig	设置存在时间

3. 在 construstor 中注入服务：

 public constructor (
    provite toasterService : toasterService 
 ){} 

4. 调用里面的方法:

 this.toasterService.pop("success","标题","内容")

5. 设置时间

public toasterconfig : ToasterConfig = new ToasterConfig({timeout:2000});

这是设置弹窗存在2s； 里面的 ToasterConfig 是上面import来的， toasterconfig 是在html里面传递到插件里的。

注意！！

1. 在同一个路由下，只能有一个 ,否则会在最后一个标签引用的组件里提示框一直存在不消失，并且前面组件出现的弹框都会出现在最后一个组件里。
2. 可以通过子组件给父组件传值的方法传递时间参数进去设置消失时间。