Angularで作るER DIAGRAM TOOL – 第十四回 Export JSON

今回は、Export JSON機能。
流れとしては、
・navbarのExport JSONをクリック
・モーダルが開く
・ダウンロードボタンを押してダウンロード
となります。

では、開かれるモーダルダウンロードから。

(1)モーダルダウンロード

/src/app/modal-download/modal-download.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/aedce01e34f26747b19e1f0ecf72fc42a6065a0f#diff-a92da9eaef0bd78db9a049f376bcc7f1

/src/app/modal-download/modal-download.component.html
https://github.com/dog-ears/er-diagram-tool/commit/aedce01e34f26747b19e1f0ecf72fc42a6065a0f#diff-12d124f7e7d163dc41c5259d7ca56f0f

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/aedce01e34f26747b19e1f0ecf72fc42a6065a0f#diff-fc6b22833aeaf77f8440c4970ade705e

・ModalDownloadComponentのimport

次はnavbarから開く処理

(2)navbar

/src/app/navbar/navbar.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/aedce01e34f26747b19e1f0ecf72fc42a6065a0f#diff-12468dba4acc93d6788c4f72b2b89a70

・DomSanitizerをimport、そしてDIする
・ModalDownloadComponentをimport

以上です。
次回は、エクスポートしたデータを読み込む機能を追加する予定です。

シェアする

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

フォローする