Angular ＆ Wijmoクイックスタート – データ連結

この記事では、前回の記事で作成したAngularアプリケーションを元にして、WijmoのInputNumber（数値入力）コンポーネントでデータ連結を設定する方法を紹介します。

Wijmoコンポーネントは、Angularのデータ連結をサポートします。Angularには、3種類のデータ連結方法が存在します。

1. プロパティ連結：一方向のデータ連結とも呼ばれます。親コンポーネント（この記事ではメインページ）で設定した値が子コンポーネント（この記事ではInputNumberコンポーネント）に渡されます。
2. 双方向のデータ連結：親コンポーネントで設定した値が子コンポーネントに渡され、同時に、子コンポーネントで設定した値が親コンポーネントに渡され、親子のコンポーネントの値が同期されます。
3. イベント連結：子コンポーネントで特定の操作を行ったときにイベント処理を実行します。

InputNumberコンポーネントの追加

src/app/app.modules.tsファイルで、WjInputModuleモジュールをインポートします。

import { WjInputModule } from 'wijmo/wijmo.angular2.input';
@NgModule({
:
imports: [
:
WjInputModule
]
})

src/app/app.component.htmlファイルで、InputNumberコンポーネントを追加します。

<wj-input-number></wj-input-number>

プロパティ連結

src/app/app.component.htmlファイルで、InputNumberのstepプロパティにデータ連結を設定します。

<wj-input-number [step]="step"></wj-input-number>

src/app/app.component.tsファイルで、連結するプロパティと値を設定します。

export class AppComponent {
step: number;
constructor() {
this.step = 100;
}
}

アプリケーションを実行すると、stepプロパティが設定され、＋ボタンや−ボタンをクリックして値を100単位で変更できることを確認できます。

双方向のデータ連結

src/app/app.component.htmlファイルで、InputNumberのtextプロパティに双方向のデータ連結を設定します。また、テキストボックスを追加して、同様に双方向のデータ連結を設定します。

<wj-input-number ... [(text)]="text"></wj-input-number>
<br><input [(ngModel)]="text">

src/app/app.component.tsファイルで、連結するプロパティと値を設定します。

export class AppComponent {
text: string;
constructor() {
this.text = '0';
}
}

アプリケーションを実行して、InputNumberまたはテキストボックスで値を変更すると、もう一方の値も同時に変更されることを確認できます。

イベント連結

InputNumberのvalueChangedイベント処理を定義して、値が変更されたときに値の判定処理を行います。

src/app/app.component.tsファイルで、イベント処理を行うonValueChangedメソッドと、値が負数かどうかを示すnegativeプロパティを定義します。また、InputNumberのクラスやメンバーを参照するために、wijmo/wijmo.inputモジュールをインポートします。

import * as wjcInput from 'wijmo/wijmo.input';
export class AppComponent {
negative: boolean;
constructor() {
this.negative = false;
}
onValueChanged(s: wjcInput.InputNumber) {
this.negative = s.value < 0;
}
}

wijmo/wijmo.inputモジュールをインポートすると、モジュールの型定義ファイルもインポートされ、モジュールのクラスやメンバを記述する際にインテリセンス（自動補完）が有効になります。

src/app/app.component.htmlファイルで、valueChangedのイベント連結を設定します。イベントハンドラメソッドの引数には、コンポーネント変数inputNumberを渡します。また、負数が入力されたことを示す文字列を追加します。

<wj-input-number ... #inputNumber (valueChanged)="onValueChanged(inputNumber)"></wj-input-number>
<p *ngIf="negative">負数が入力されました。</p>

ここでは省略していますが、イベントハンドラメソッドの引数にイベント変数$eventを渡すことも可能です。

アプリケーションを実行すると、負数を入力したときだけ「負数が入力されました。」というメッセージが表示されることが確認できます。

さいごに

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

• デモアプリケーションを試す
• トライアル版をダウンロードして試す

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

• 問合せ先を確認する
• 個別相談会（Web会議）について確認する