デザイナの組み込み（Angular）

このトピックではAngularフレームワークでデザイナを使用する際のAngular対応パッケージについて説明します。Angular対応パッケージからデザイナをWebアプリケーションに組み込む方法については、クイックスタート > Webデザイナコンポーネントの使用 > Angularを参照してください。

npmからインストール

Angular対応パッケージはnpmを利用してインストールすることができます。

@grapecity/activereports-angularパッケージをプロジェクトにインストールすると、デザイナを使用できます。

Angular対応パッケージは@grapecity/activereportsパッケージに依存しており、Angular対応パッケージをインストールすると同時にインストールされます。

ActiveReportsModuleのインポート

Angular対応パッケージのデザイナはActiveReportsModuleに存在するため、次のようにアプリケーションのルートモジュール、またはデザイナを使用する他のモジュールにインポートする必要があります。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@grapecity/activereports-angular";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angularのデザイナ

Angularのデザイナは、gc-activereports-designerタグを使用して組み込むことができます。また、次のプロパティを使用して外観を設定できます。

プロパティ	設定値	説明
onInit	()=>DesignerConfig	デザイナを初期化する時のオプションを含むDesignerConfigオブジェクトを返却します。使用方法は「カスタマイズ」を参照してください。
hotkeysEnabled	boolean	非推奨となりました。代わりに onInitコールバックを使用してください。このプロパティは将来的に廃止されます。
language	string	非推奨となりました。代わりに onInitコールバックを使用してください。このプロパティは将来的に廃止されます。
fontSet	"default" \| "registered" \| "all"	非推奨となりました。代わりに onInitコールバックを使用してください。このプロパティは将来的に廃止されます。
dataSources	DataSourceTemplatesの配列	事前定義されたデータソースとデータセットを設定します。
reportList	Report Resource Info itemsの配列	SubReportコントロールの［レポート名前］プロパティを設定します。
imageList	Image Resource Info itemsの配列	Imageコントロールの事前定義画像を設定します。
onCreate	onCreate関数	デザイナのツールバーに［新規作成］ボタンを追加し、対応するクリックハンドラを設定します。
onOpen	onOpen関数	ツールバーに［開く］ボタンを追加し、対応するクリックハンドラを設定します。
onRender	onRender関数	ツールバーに［プレビュー］ボタンを追加し、対応するクリックハンドラを設定します。
onSave	onSave関数	ツールバーに［保存］ボタンを追加し、対応するクリックハンドラを設定します。
onSaveAs	onSaveAs関数	ツールバーに［名前を付けて保存］ボタンを追加し、対応するクリックハンドラを設定します。
onOpenFileMenu	onOpenFileMenu関数	ツールバーに［ファイル］メニューを追加し、対応するクリックハンドラを設定します。
report	レポートオブジェクト	指定されたレポートをデザイナに読み込みます。
customInitTemplates		廃止されました。代わりに onInitコールバックを使用します。
documentChanged	(args: DocumentChangedEventArgs)=>void	デザイナに読み込まれたレポートが変更されたときに発生するイベントのハンドラを設定します。

親コンポーネントは、ViewChildインジェクションによってDesigner クラスのgetReport、setReport、およびprocessCommandメソッドを使用できます。

@ViewChild(DesignerComponent, { static: false }) reportDesigner: DesignerComponent;