はじめに
クイックスタート
Angular
5.20241.9
5.20241.9

AngularでWijmoを使用する

Angular用のWijmo コンポーネント は、AngularテンプレートマークアップでWijmo コントロール を使用できるようにします。TypeScriptクラス継承機能の観点から見ると、Wijmo Angular コンポーネント は、それらが表す コントロール クラスを「拡張」しています。つまり、Wijmoコンポーネントへの参照を取得した場合、参照されるインスタンスは、コンポーネントのすべてのプロパティ、イベント、メソッドを含むWijmo コントロール であると同時に、Angular コンポーネント でもあります。Wijmoコンポーネントは、コントロールクラスを拡張し、Angularテンプレートマークアップでコントロールを使用できるようにするために必要な機能を追加し、完全に機能する一方向/双方向のプロパティ連結およびイベント連結を備えています。Wijmoコントロール、Wijmo Angularコンポーネント、そしてAngular自体がすべて同じTypeScript言語で記述されているため、この統合はスムーズです。

Angular CLIを使用してアプリケーションを作成する方法については、「Angular & Wijmoクイックスタート」ブログを参照してください。

Wijmo Angularコンポーネントは、名前に「angular2」を含む一連のモジュール（1つのコアライブラリモジュールに対して1つのモジュール）として出荷されています。たとえば、「wijmo.angular2.grid.js」モジュールは、「wijmo.grid.js」コアモジュールに含まれるコントロールに対応するコンポーネントを表します。これらのモジュールは、@mescius/wijmo.angular2.all npmパッケージに含まれており、こちらで説明している方法でインストール可能です。

すべてのWijmoモジュールは、 アンビエント 名を使用してインポートする必要があります。これは、先頭に「@mescius/」が付き、「.js」拡張子を省いたモジュール名です。たとえば、次のimport文は「wijmo.angular2.grid.js」モジュールのコンテンツをインポートします。

import * as wjGrid from '@mescius/wijmo.angular2.grid';

Wijmoコンポーネントのインポート

この設定により、Wijmo Angularモジュールをインポートし、モジュールに含まれるコンポーネントやディレクティブを使用できます。たとえば、次のコードは、MyCmpコンポーネントのテンプレートにWjFlexGridコンポーネントを追加し、追加したグリッドへの参照をflexプロパティに設定します。

import { Component, NgModule, ViewChild } from '@angular/core';
import { WjGridModule, WjFlexGrid } from '@mescius/wijmo.angular2.grid';
@Component({
    template: '<wj-flex-grid #flex [itemsSource]="data"></wj-flex-grid>',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
    @ViewChild('flex') flex: WjFlexGrid;

}

@NgModule({
    imports: [WjGridModule, BrowserModule],
    declarations: [MyCmp]
})
export class MyModule {
}

各Wijmo for Angular JavaScriptモジュールには、そのモジュールのすべてのコンポーネントをエクスポートするAngular NgModuleが含まれます。Wijmo NgModuleデコレータのimportsメタデータプロパティにWijmo NgModuleへの参照を追加するだけで、NgModuleコンポーネントのテンプレートでこれらのコンポーネントを使用できます。

NgModuleの名前は、JavaScriptモジュール名と次のスキーマを使用して構成されます。

Wj<プリフィックス wijmo.angular2 のないJSモジュール名>Module

たとえば、wijmo.angular2.input JavaScriptモジュールの場合はWjInputModule NgModule、wijmo.angular2.grid.filter JavaScriptモジュールの場合はWjGridFilterModule NgModuleになります。

コードでのWijmoコントロールの作成

Angular用のWijmo コンポーネント は、テンプレートマークアップで使用されます。コードでWijmoコントロールを作成する場合は、コンポーネントではなく、その目的で用意されているコアモジュールのWijmo コントロール を使用する必要があります。コアモジュールの名前は、対応するAngular相互運用モジュール名から「angular2」を省略した名前と同じです。たとえば、次のコードは、コードでFlexGridコントロールを作成します。

import { FlexGrid } from '@mescius/wijmo.grid';
let flex = new FlexGrid('#host_element');

WjFlexGrid コンポーネントの代わりに FlexGrid コントロールをインポートして、「@mescius/wijmo.angular2.grid」モジュールの代わりに「@mescius/wijmo.grid」モジュールからインポートしていることに注意してください。

Wijmo CSSの追加

Wijmoコントロールを正常に表示および動作させるには、Wijmo CSSファイルをアプリケーションにロードする必要があります。スタイルは @mescius/wijmo.styles npmパッケージに含まれます。

Angular CLIアプリケーションでスタイルをロードするには、次のimportステートメントをデフォルトのstyles.cssファイルの先頭に追加します。

@import '@mescius/wijmo.styles/wijmo.css';

その他のAngularの使用方法

AngularアプリケーションでWijmoを使用する方法の詳細については、Angularマークアップ構文のトピックを参照してください。