読者です 読者をやめる 読者になる 読者になる

ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

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

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

ComponentOne