はじめに
前回は、自動生成されたAngularプロジェクトがどのような構成になっているのか、どこをどのように修正して、自分が望む動作にカスタマイズできるのかを学んだ。今回は入力フォームを作り、ボタンがクリックされたとき何かプログラムを実行したり、メッセージを画面に差し込んだりする方法について学ぶ。
フォームと文字列の出力部分を作成する
入力フォームを作る
app.component.html
<!–The content below is only a placeholder and can be replaced.–>
<app-simple-form></app-simple-form>
simple-form.component.html
<input>
+
<input>
<button>Calc</button>
上記のsimple-form.component.htmlのソースコードはだたのHTMLである。この段階では、プログラムとしてなにも動かい。ファイルを保存すると、それを検知して、ブラウザがリロードし、2つのテキストボックスとCalcボタンと書かれたものが表示されるだけである。
計算結果を表示する箇所を作る
次にTypeScriptのプログラムと連携する場所を作っていく。画面の末尾に、「計算家結果を表示する場所」を確保する。
simple-form.component.html
<input>
+
<input>
<button>Calc</button>
<div>{{ result }}</div>
この「｛｛ と ｝｝｝で囲む表記は前回学んだとおり、コンポーネントのプロパティの値をそこに埋め込むための表記である。今回は、「{{result}}」とかいてるので、コンポーネントのresultプロパティの値が差込まれる。
プロパティを作る
まだ、コンポーネントのプロパティを作っていないため、「{{result}}」の箇所は空白である。
次に、コンポーネントを構成するTypeScriptのプログラムを修正して、このresultプロパティを作成する。
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-simple-form’,
templateUrl: ‘./simple-form.component.html’,
styleUrls: [‘./simple-form.component.css’]
})
export class SimpleFormComponent implements OnInit {
result:string=”足し算をします”;
constructor() { }
ngOnInit() {
}
}
プロパティを追加する方法はいくつかあるが、ここでは「クラスの中に、変数を宣言する」方法で、追加したのは下記。
result:string=”足し算をします”;
これを追加することによって、クラスにresultという変数が作られ、それがresultのプロパティとして機能するようになる。「=」の右側に表示しているのは文字列です。
ボタンがクリックされたときの処理を作る
次に「Calc」ボタンがクリックされたときの処理を記述する。
１．実行する処理をコンポーネント側にメソッドとして実装する
コンポーネントのメソッドとして記述する。メソッドとはコンポーネントにおけるプログラムの塊のことであり、好きに名前をつけることが出来る。仮に「addAndShow」だとすると次のように記述する。
export class SimpleFormComponent implements OnInit {
result:string=”足し算をします”;
addAndShow() :void {
}
テンプレート側のボタンとコンポーネント側のメソッドを結びつける。
<button (click)=”addAndShow()”>Calc</button>
これはAngularの特殊な記法で、ボタン上で「click（クリックされた）」とい事象が発生したときは、addAndShowという名前のメソッド実行する—-という意味になる。
クリックされたときに実行したい処理をメソッドとして書く
コンポーネントに、ボタンがクリックされたときに実行するメソッドを作る。メソッドの名前は何でも構わないが、ここではaddAndShowとする。
addAndShow() :void {
this.result=”計算しました”;
}
上記ソースはTypeScriptの文法でメソッド定義を書いている。
これによってresultプロパティの値が変わることになり、「足し算します→計算しました」に差し替わる。
終わりに
これで、ボタンがクリックされたとき何かプログラムを実行したり、メッセージを画面に差し込んだりする方法が分かった。次回は、テキストボックスに入力された読み込む処理を作っていく。
コメント