Angularで作るER DIAGRAM TOOL – 第六回 モデルの追加機能を実装

今回は、dataのmodelを追加する機能を実装します。

(1)navbar から モデル新規作成用フォームモーダルを開く

まずは、navbarのEdit – Create Modelを押したときに、開かれるモーダルコンポーネントを作成

/src/app/modal-model/modal-model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/aaa0b361acbfa19b2b43e49fb16d0790c48aa99a#diff-2eb3d4b53b961d6ddaf0deffaaf7240e

・dataServiceをDIしています。
・メンバ変数 mode により、作成と編集両方にフォームを使いまわせるようにします。
・メソッドcreateは、とりあえずモーダルを閉じるのみにしています。

/src/app/modal-model/modal-model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/aaa0b361acbfa19b2b43e49fb16d0790c48aa99a#diff-deab5830f8b1c1098bbdc08d936b7fc0

忘れずに、新しいコンポーネント、サービスをモジュールに登録します。
entryComponentsも忘れずに追加。

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

次に、navbarにモーダルを開く機能を実装

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

・ModalModelComponent、Modelクラスをimport
・this.bsModalService.show()でモーダルを開きつつ、initialStateでmodeと新しいModelを渡しています。

これで、モーダルが開くようになりました。
もちろん、Createを押しても、モーダルが閉じるだけです。

(2)dataServiceにモデル追加機能を追加

/src/app/modal-model/modal-model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/43f0da8210797dc47a046d9a57c3713aae045785#diff-2eb3d4b53b961d6ddaf0deffaaf7240e

・dataServiceのaddModel(未実装)を呼び出す

/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/43f0da8210797dc47a046d9a57c3713aae045785#diff-ae990bb302f27e60323deb45d6746b17

・dataクラスにあるgetNewModelId()で、新しいIDを取得しつつ、渡されたmodelをデータに追加します。

これで、右カラムの情報欄を見るとモデルが追加されるようになりました。

次回は、モデルの追加が左カラムエリアにも反映されるように修正します。

スポンサーリンク
(English) google_adsense
(English) google_adsense

シェアする

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

フォローする

スポンサーリンク
(English) google_adsense