5.20193.646
5.20193.646

Angularコンポーネント

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

Wijmo Angularコンポーネントは、コアライブラリパッケージごとに1つのnpmパッケージのセットとして出荷され、名前には「angular2」という単語が含まれています。たとえば、"wijmo.angular2.grid"パッケージは、コアの"wijmo.grid"パッケージのコントロールのコンポーネントを表します。パッケージは別々にインストールすることも、"@grapecity/wijmo.angular2.all"グループパッケージを使ってまとめてインストールすることもできます。

npm install @grapecity/wijmo.angular2.all

Wijmo npmパッケージの詳細については、「npmによるWijmoの参照」トピックを参照してください。

その後、ESMのimportステートメントを使用してモジュールをインポートできます。たとえば、次のimport文は"wijmo.angular2.grid"モジュールの内容をインポートします。

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

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

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

import { Component, NgModule, ViewChild } from '@angular/core';
import { WjGridModule, WjFlexGrid } from '@grapecity/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;

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

各Wijmo 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 '@grapecity/wijmo.grid';
let flex = new FlexGrid('#host_element');

WjFlexGridコンポーネントではなくFlexGridコントロールを、「@grapecity/wijmo.angular2.grid」ではなく「@grapecity/wijmo.grid」モジュールからインポートします。

さまざまなローダー/バンドラーツールへの適合

最もよく使用されているモジュールローダーとモジュールバンドラーにWijmoがよく適合していることを確認します。

WebPack

ここで必要な手順は、wijmo.cssファイルをバンドルに含めることだけです。ファイルはwijmo.stylesパッケージに含まれており、アプリケーションのCSSに使用する標準的なWebPackの方法を使用してインクルードする必要があります。

import 'style!css!@grapecity/wijmo.styles/wijmo.css';

style-loaderとcss-loaderをアプリケーションのpackage.jsonファイルの「devDependencies」オプションに追加する必要があります。

"devDependencies": {
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.1",
    ... another libraries
}

SystemJSローダー

Wijmoアンビエントモジュール名をnode_modulesフォルダ内のWijmo .jsファイルにマップする必要があります。それには、次の設定オプションを追加してSystem.configメソッド呼び出しに渡します。

map: {
    //// You need a separate mapping for every Wijmo package
    // Pure JS packages:
    '@grapecity/wijmo': 'node_modules/@grapecity/wijmo/index.js',
    '@grapecity/wijmo.input': 'node_modules/@grapecity/wijmo.input/index.js',
    '@grapecity/wijmo.grid': 'node_modules/@grapecity/wijmo.grid/index.js',
    ...
    // Angular interop packages
    '@grapecity/wijmo': 'node_modules/@grapecity/wijmo.angular2.directivebase/index.js',
    '@grapecity/wijmo.input': 'node_modules/@grapecity/wijmo.angular2.input/index.js',
    '@grapecity/wijmo.grid': 'node_modules/@grapecity/wijmo.angular2.grid/index.js',
    ...
}

Angular CLI

詳細な指示については、「Angular & Wijmoクイックスタート - アプリケーションの作成」ブログを参照してください。

Angularマークアップ構文

Wijmo Angularコンポーネントは、テンプレートマークアップでコンポーネントを指定するために、一貫した命名規則を使用します。コンポーネントに使用されるHTML要素名と属性名は、以下の単純なルールを使用しており、コンポーネントクラスやメンバ名から容易に推測できます。

  • Wijmoコンポーネントを表すHTML要素名は、小文字ハイフン構文を使用して指定されます。たとえば、WjInputNumberコンポーネントは、wj-input-numberになります。

```html

*   Wijmo属性**ディレクティブ**には、キャメルケース形式のクラス名が使用されます。つまり、最初の文字が小文字のクラス名になります。たとえば、**WjFlexGridCellTemplate**ディレクティブは、**wjFlexGridCellTemplate**属性を使用して定義されます。

html

*   Wijmoコンポーネントのプロパティおよびイベントを表す属性の名前は、コンポーネントクラスインタフェースから公開されているプロパティおよびイベントの名前と正確に同じです。プロパティ名は、一方向連結の場合は角かっこで囲み(**[isReadOnly]**など)、双方向連結の場合は角かっことかっこで囲みます(**[(value)]**など)。イベント名は、かっこで囲みます(**(valueChanged)**など)。次に例を示します。

html
// event binding

    連結式は、代入先のプロパティタイプと同じ型の値として評価されます。上の例の**format**文字列型プロパティには、文字列リテラルを表す一重引用符で囲まれた**'n0'**が代入されています。引用符を省略して単に**n0**を指定した場合、この式はプロパティ名として処理されます。同様に、**isReadOnly**ブール値プロパティは**true**に連結されていますが、引用符はありません。**true**はブール値型の定数であり、一重引用符で囲まれた**'true'**は文字列リテラルを表すからです。

### イベント連結の詳細

Wijmoイベントハンドラは、送信元とイベント引数の2つのパラメータを持つ関数として定義されます。Angularの**EventEmitter**実装は、イベントイニシエータからサブスクライバに1つだけパラメータを渡すことができ、これには、テンプレートマークアップの**$event**ローカル変数の値としてアクセスできます。Wijmoイベントは、このパラメータにイベント引数を渡します。次に例を示します。

html // $event contains CellRangeEventArgs object here

TypeScript/JavaScriptコードでWijmoコントロールイベントをサブスクライブするときのように、イベントハンドラで送信元も受け取る場合は、コンポーネントにローカルテンプレート変数を追加し、それをイベント引数と共にイベントハンドラに渡すだけです。

html // pass sender ('flex') and event arguments ($event) to the handler

### 「initialized」イベント

すべてのWijmo Angularコンポーネントには、コントロールがページに追加されて初期化された後に発生する「initialized」イベントがあります。

このイベントを使用して、マークアップでプロパティを設定するほかに、追加的な初期化を実行できます。次に例を示します。

html

```javascript
// implementation
export class AppComponent {
    constructor() {
        this.data = ...;
    }

    // add custom merge manager to the FlexGrid
    initGrid(flex) {
        flex.mergeManager = new CustomMerge(flex);
    }
}