究極のガイド: Angular コンポーネントを Handsontable セルでレンダリングする

Angular コンポーネントを Handsontable セルでレンダリングする

前提条件

このチュートリアルを始める前に、以下のものが必要です。

• Handsontable
• Angular CLI
• Node.js と npm

プロジェクトの作成

まず、新しい Angular プロジェクトを作成します。

ng new handsontable-angular

プロジェクトに Handsontable をインストールします。

npm install handsontable --save

コンポーネントの作成

次に、MyComponent という名前の新しい Angular コンポーネントを作成します。

ng g c my-component

MyComponent のテンプレートファイル (my-component.component.html) は次のように変更します。

<h1>My Angular Component</h1>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

次に、app.component.ts ファイルを編集して、Handsontable インスタンスを設定します。

import { Component, OnInit } from '@angular/core';
import Handsontable from 'handsontable';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const hot = new Handsontable('#hot', {
      data: [
        ['A1', 'B1', 'C1'],
        ['A2', 'B2', 'C2'],
        ['A3', 'B3', 'C3'],
      ],
      columns: [
        {
          type: 'custom',
          renderer: (instance, td, row, col, prop, value, cellProperties) => {
            const componentRef = instance.getCellRenderer(td);
            if (!componentRef) {
              const componentFactory = instance.container.injector.get(MyComponent);
              const componentRef = instance.insertComponentIntoCell(td, componentFactory);
            }
            componentRef.instance.data = value;
          }
        },
        {},
        {},
      ],
    });
  }

}

このコードは、次のことを行います。

1. MyComponent コンポーネントのインスタンスを作成します。
2. Handsontable インスタンスを作成します。
3. custom タイプのカラムを設定します。
4. renderer 関数を設定します。
5. renderer 関数は、次のことを行います。
   • セルに MyComponent コンポーネントを挿入します。
   • コンポーネントの data プロパティをセルの値に設定します。

実行

プロジェクトを実行するには、次のコマンドを実行します。

ng serve

ブラウザで http://localhost:4200 を開き、Handsontable テーブルが表示されていることを確認します。セルの最初の列には、MyComponent コンポーネントが表示されます。

import { Component, OnInit } from '@angular/core';
import Handsontable from 'handsontable';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const hot = new Handsontable('#hot', {
      data: [
        ['A1', 'B1', 'C1'],
        ['A2', 'B2', 'C2'],
        ['A3', 'B3', 'C3'],
      ],
      columns: [
        {
          type: 'custom',
          renderer: (instance, td, row, col, prop, value, cellProperties) => {
            const componentRef = instance.getCellRenderer(td);
            if (!componentRef) {
              const componentFactory = instance.container.injector.get(MyComponent);
              const componentRef = instance.insertComponentIntoCell(td, componentFactory);
            }
            componentRef.instance.data = value;
          }
        },
        {},
        {},
      ],
    });
  }

}

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {

  data: string;

  constructor() { }

  ngOnInit() {
  }

}

テンプレートファイル

<h1>Handsontable with Angular Components</h1>
<div id="hot"></div>

my-component.component.html

<h1>My Angular Component</h1>
<p>{{data}}</p>

ng serve

Angular コンポーネントをラップするカスタムセルレンダラーを使用する

この方法は、Angular コンポーネントをラップするカスタムセルレンダラーを作成し、そのレンダラーを Handsontable の renderer オプションに渡すことを involves.

import { Component, OnInit } from '@angular/core';
import Handsontable from 'handsontable';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {

  data: string;

  constructor() { }

  ngOnInit() {
  }

}

const customRenderer = (instance, td, row, col, prop, value, cellProperties) => {
  const componentRef = instance.getCellRenderer(td);
  if (!componentRef) {
    const componentFactory = instance.container.injector.get(MyComponent);
    const componentRef = instance.insertComponentIntoCell(td, componentFactory);
  }
  componentRef.instance.data = value;
};

const hot = new Handsontable('#hot', {
  data: [
    ['A1', 'B1', 'C1'],
    ['A2', 'B2', 'C2'],
    ['A3', 'B3', 'C3'],
  ],
  columns: [
    {
      renderer: customRenderer
    },
    {},
    {},
  ],
});

Angular コンポーネントをテンプレートとして使用する

この方法は、Angular コンポーネントをテンプレートとして使用し、そのテンプレートを Handsontable の cellTemplate オプションに渡すことを involves.

import { Component, OnInit } from '@angular/core';
import Handsontable from 'handsontable';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {

  data: string;

  constructor() { }

  ngOnInit() {
  }

}

const hot = new Handsontable('#hot', {
  data: [
    ['A1', 'B1', 'C1'],
    ['A2', 'B2', 'C2'],
    ['A3', 'B3', 'C3'],
  ],
  columns: [
    {
      cellTemplate: `<my-component [data]="value"></my-component>`
    },
    {},
    {},
  ],
});

この方法は、Angular コンポーネントを Handsontable プラグインとして作成し、そのプラグインを Handsontable に登録することを involves.

import { Component, OnInit } from '@angular/core';
import Handsontable from 'handsontable';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {

  data: string;

  constructor() { }

  ngOnInit() {
  }

}

Handsontable.plugins.register('myComponent', {
  init: () => {
    // ...
  },
  // ...
});

const hot = new Handsontable('#hot', {
  data: [
    ['A1', 'B1', 'C1'],
    ['A2', 'B2', 'C2'],
    ['A3', 'B3', 'C3'],
  ],
  columns: [
    {
      type: 'myComponent'
    },
    {},
    {},
  ],
});

どの方法を使用するべきか

どの方法を使用するかは、要件と好みによって異なります。

• 3番目の方法は、最も柔軟な方法ですが、最も複雑な方法です。
• 2番目の方法は、最も簡潔な方法ですが、Angular コンポーネントのテンプレートに制限されます。
• 最初の方法は、最もシンプルで汎用性の高い方法です。