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-停止閃爍