Angular2 FlashBoxComponent
1.0.0
Flashboxコンポーネントは、単純なユーザー情報メッセージを表示するために提供されるAngular2コンポーネントです。
開発に使用されるアプリケーションスケルトンはここで見つけることができますangular2-アプリケーションスケルトン
ノードとNPMをインストールする必要があります。
プロジェクトルートディレクトリにノード依存関係をインストールします（これは「package.json」ファイルが配置されている場所です）：
$ npm install使用してタイプスクリプト定義をインストールしてください。
$ typings installでアプリケーションを開始します
$ gulpアプリケーションは初期コンパイルされ、開始されます。デフォルトでは、サーバーはポート3000でリスニングされています。アプリケーションは、url localhost：3000のWebブラウザーからアクセスできます。
Flashboxコンポーネントは、（今のところのみ）CommonComponentsモジュールの一部です。
モジュールを使用するには、モジュールローダーを構成する必要があります。 SystemJSモジュールローダーを使用した場合、次のマップを追加します。
System.config({
...
map: {
'commoncomponents': 'node_modules/commoncomponents'
}
...
})
アプリケーションモジュール定義では、commonComponentsモジュールをインポートします。
...
Import { CommonComponentsModule} from '/commoncomponents/commoncomponents.module';
...
@NgModule({
...
imports: [ CommonComponentsModule ],
...
})
これで、要素を使用してモジュール宣言コンポーネントテンプレートでフラッシュボックスコンポーネントを使用できます。
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>
タイプ：文字列、デフォルト：プライマリはフラッシュボックスのタイプを指定します。利用可能なタイプ：デフォルト、プライマリ、成功、情報、警告、デフォルトのブートストラップラベルタイプに基づく危険
位置：文字列、デフォルト： tr 。フラッシュボックスの位置を指定します。利用可能な値：
最大幅：文字列、デフォルト： 300pxフラッシュボックスコンポーネントの最大幅を指定
SettimeOut番号、デフォルト： 2000 MSでタイムアウトを指定します（コントロールの数が表示されます）。デフォルトは2秒です。
フラッシュボックス制御アクションを引き起こすために、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();
