Angular2 FlashBoxComponent

Angular2-Flashbox组件示例应用程序

Flashbox组件是Angular2组件，用于显示简单的用户信息消息。

可以在此处找到用于开发的应用骨架 - Angular2-应用程序骨架

先决条件

必须安装节点和NPM。

如何开始申请

在项目root目录中安装节点依赖项（这是“ package.json”文件所在的位置）使用：

$ npm install

使用以下方式安装打字稿定义：

$ typings install

开始使用

$ gulp

申请将是原始编译并开始的。默认情况下，服务器正在端口3000上侦听。可以通过url localhost上的Web浏览器访问应用程序：3000 。

如何使用闪存箱组件

Flashbox组件（仅目前）是CommonComponents模块的一部分。

为了使用模块，您必须配置模块加载程序。如果您使用SystemJS模块加载程序添加以下映射：

 System.config({
    ...
    map: {
        'commoncomponents': 'node_modules/commoncomponents'
    }
    ...
})

在您的应用程序模块中，定义文件导入公共组件模块。

 ... 
Import { CommonComponentsModule} from '/commoncomponents/commoncomponents.module';
...
@NgModule({
    ...
     imports:      [ CommonComponentsModule ],
    ...
})

现在，我们可以在模块中使用flashbox组件使用元素声明的组件模板。

将基于HTML的用户信息消息放在闪存盒元素中。

 <flash-box>
        <!-- Message -->
</flash-box> 

输入

属性

    <flash-box [type]="type_value" [position]="position_value" [max-width]="maxwidth_value" [setTimeout]="setTimeout_value>
        HTML message
    </flash-box>    

动作

1. 类型：字符串，默认值：主要指定Flash Box的类型。可用类型：默认，主要，成功，信息，警告，基于默认的bootstrap标签类型的危险

2. 位置：字符串，默认值： tr 。指定闪光灯盒的位置。可用值：

• TR-右上角，
• TM-上层，
• TL-左上，
• CR-中右，
• CM-中心中间，
• CL-左侧，
• br-右右，
• BM-底部中间，
• BL-左下

3. 最大宽度：字符串，默认值： 300px指定Flash Box组件的最大宽度

4. settimeout号码，默认值： 2000在MS中指定超时（可见控件的数量）。默认值为2秒。

动作

为了导致Flashbox控制操作，请使用Angular2模板本地变量系统。

模板示例

    <flash-box .... #tlv_name>
        ....
    </flash-box>
    
    <button (click)="tlv_name.available_action">Cause flashbox action</button>

控制器示例

参考组件

 import { FlashBoxComponent } from 'commoncomponents/components/flashbox.component';

使用模板本地变量的参考组件

 @ViewChild("tlv_name") tlv:FlashBoxComponent;
tlv_name.available_action();

可用操作：

1. flashonce（）： void- settimeout仅显示一次flashbox
2. show（）：无效- 使控制无限的时间可见（或者取消其他操作发生）
3. hide（）： void-使控件无限的时间隐藏（或者取消其他动作发生）
4. startflashing（）： void-开始无限的时间闪烁（或取消其他操作发生）。从毫无用处到可见的过渡期设置为0.5秒，目前无法配置。 flashbox控制我们显示了SettieMout的时间。
5. stopflashing（）： void-停止闪烁