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

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

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

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

f:id:ComponentOne_JP:20170214103608p:plain

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単位で変更できることを確認できます。

f:id:ComponentOne_JP:20170221155006p:plain

双方向のデータ連結

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またはテキストボックスで値を変更すると、もう一方の値も同時に変更されることを確認できます。

f:id:ComponentOne_JP:20170221154625p:plain

イベント連結

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を渡すことも可能です。

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

f:id:ComponentOne_JP:20170221154631p:plain

さいごに

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

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

\  この記事をシェアする  /