[Angular]Dialog 改良版

前回の記事の[Angular]dialog(confirm)を作るを使っていて面倒くさいなと感じたのでラッピングとちょいちょい改良した。

ついでに動作を確認出来るDEMOも用意
githubも更新

変更と思考内容

Dialogでぱっと考えて欲しいものは4つ

  • info:情報ダイアログ(closeのみ)
  • confirm:確認ダイアログ(cancle、OK)
  • warning:警告ダイアログ(close)
  • error:エラーダイアログ(close)

それぞれを別コンポーネントで実装しても良いがimportが面倒だし、そもそも似たような使用なのでひとまとめにしたいなと思った。
confirmだけはcancelボタンとokボタンが存在し、その他はcloseボタンのみなのでそれだけ分岐させれば良いかなと。

またobserverの戻り値も以前はany型だったが簡略化してbooleanで十分と考えた。

動作確認環境

必須環境

Angualr Material環境が構築済みであること
Angular 4以上?

移植方法

自分のプロジェクトに移植したいならまずAngular Materialの環境を構築する必要がある。
日々バージョンが変わりインストール方法も変わる可能性があるので最新は公式(Angular Material)を参考にしてもらいたいが最低限動く状態にする方法を記載する。

パッケージのインストール

Material Iconの適用

Material Iconを使用するのでWEBフォントを追加する

Materialのcss適用

angular-cliを使っている場合は.angular-cli.jsonに追加

Daialogのソースをコピー

好きなところにどうぞ

app.module.tsの変更

DIを行う。
importするdialog.component.tsはコピーしたディレクトリに依存するのでここでは「src/app/dialog/dialog.component.ts」に配置したものとする

移植はこれで終わり。

使い方

準備

ダイアログを使用するコンポーネントのグローバルエリアにDialog型の変数dialogを宣言

コンストラクターでdialogを実装させる。

使ってみる

dialog変数はグローバル変数になっているので「this.dialog」でアクセスして使用する。
ダイアログのボタン押下した後の処理が必要がない場合、つまりダイアログの表示だけしたい場合はobserverのsubscribeを無視してもいい

これだけで表示ができる

infoはcloseするボタンしか無いが、ダイアログが終了するためには「closeボタンを押す」、「ESCキー押下」、「ダイアログ画面外をクリック」などの動作がある。戻り値(rtn)がtrueになる条件は「closeボタンを押す」であり、そのたはundefinedを返す。
もし条件分岐を行いたい場合は下記のようになる。

普通は条件分岐をしたいのはconfirmだろう

デザインや機能変更・追加

デザインを変更したい場合はdialog.component.tsのtemplateを変更する。
機能を追加したい場合はdialog.component.tsのDialogクラス内にpublicの変数を追加する。

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告