Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

今回は、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をデータに追加します。

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

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

dog-ears
主に、PHP、laravel、Angular、Cloud9などに興味あり。
http://dog-ears.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away