Angular15の新機能

Angular フレームワーク (以下、「Angular」と呼びます) は、Google によって開発された Web アプリケーションフレームワークです。その強力な依存関係注入システム、再利用可能なモジュール開発コンセプト、およびレスポンシブプログラミングモードにより、Angular は即座に成功を収め、大きな注目とトラフィックを獲得しました。これまで Angular は 15 のバージョンを繰り返してきましたが、Angular15 の新しいハイライトは何ですか? エディターは、Angular 15 のいくつかの新機能を簡単に紹介します (以下の機能は Angular の公式 Web サイトからのものです)。

スタンドアロン API は開発者プレビューの対象外

Angular 14 リリースでは、開発者が NgModules を使用せずにアプリケーションを構築できるようにする別の API を使用します。これらの API は Angular 15 の安定バージョンに更新されており、独立した API の開発は将来的にセマンティックバージョニングによって制御される予定です。

MDC ベースのコンポーネントが安定版としてリリースされました

Angular15 は、Web 用マテリアルデザインコンポーネント (MDC) の Angular マテリアルに基づいてコンポーネントのリファクタリングを最適化し、Angular をマテリアルデザインの仕様に近づけます。ほとんどのコンポーネントについて、Angular はスタイルと DOM 構造を更新します。新しいコンポーネントの場合、Angular は TypeScript API とコンポーネント/ディレクティブセレクターの一部を保持します。

言語サービスでの自動インポート

Angular15では、テンプレートで使用されているがNgModuleに追加されていないグループを自動的にインポートできます

コンポーネントまたは個々のコンポーネント。

Angular がアップグレードされたので、新しい遊び方を試してみませんか? レポートを Angular15 に統合したいのですが、その方法がわかりませんか?

関係ないよ、今日教えてあげるよ。

Angular15にレポートプラグインを導入

Excel は、データ情報の統計や分析を行うためのオフィスソフトウェアとして、私たちの日常の仕事や生活において非常に重要な役割を果たしていることは誰もが知っています。従来のレポートはブラウザからダウンロードし、Excel で開いてデータを変更する必要がありましたが、ブラウザ上で Excel レポートデータを直接変更できるプラグインはありますか? 答えは「はい」です。

Angular15にExcelレポートプラグインを統合し、簡単なファイルアップロードとダウンロードを実現する方法を紹介します。

このチュートリアルでは、node.js を使用します。最新バージョンがインストールされていることを確認してください。また、プログラミング環境としてVisual Studio Code（以下、VSCode）というソフトウェアを使用する必要がありますので、管理者として実行してください。

Angular 統合レポートプラグイン:

ワークスペースコードを保存する新しいフォルダーを作成します (フォルダーパスは英語であることが望ましい)。

コマンドを使用して Angular プロジェクトを初期化します (コマンドプロンプト CMD を使用してコマンドを入力します)。

//Angular CLI をグローバルにインストールする

npm install -g @angular/cli

// Angular CLI 経由で新しいプロジェクトを作成する

ng new spread-sheets-app

(Angular プロジェクトの初期化)

次の表のリソースを package.json ファイルの依存関係タグに貼り付け、npm install コマンドを使用してダウンロードし、ngserve コマンドを実行します。

"@angular/animations": "\^15.2.9",

"@angular/common": "\^15.2.9",

"@angular/compiler": "\^15.2.9",

"@angular/core": "\^15.2.9",

"@angular/forms": "\^15.2.9",

"@angular/platform-browser": "\^15.2.9",

"@angular/platform-browser-dynamic": "\^15.2.9",

"@grapecity/spread-sheets-resources-zh": "15.1.0",

"@angular/router": "\^15.2.9",

"@grapecity/spread-excelio": "\^15.2.5",

"@grapecity/spread-sheets": "\^15.2.5",

"@grapecity/spread-sheets-angular": "\^15.2.5",

"@grapecity/spread-sheets-charts": "\^15.1.1",

"@grapecity/spread-sheets-designer": "15.1.2",

"@grapecity/spread-sheets-designer-resources-cn": "15.1.2",

"@grapecity/spread-sheets-designer-angular": "15.1.2",

"file-saver": "\^2.0.5",

"rxjs": "\~7.5.0",

"tslib": "\^2.3.0",

"zone.js": "\~0.11.4"

(テーブルプラグインリソースをAngularプロジェクトに導入)

テーブルコンポーネントをインスタンス化し、テーブルオブジェクトのコンテンツを初期化します。

src/app/app.component.html でインスタンスフォームを初期化します。

\<div class='maincontainer'\>

\<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle" (workbookInitialized)="workbookInit(\$event)"\>

\</gc-spread-sheets\>

\</div\>

(インスタンステーブルの初期化)

src/app/app.component.ts でテーブルのサイズと内容を設定します。

//コンテンツの長さ幅の形式を設定します

export class AppComponent {
    
    

spreadBackColor = 'aliceblue';

hostStyle = {
    
    

width: '95vw',

height: '80vh'

};

private spread;

private excelIO;

//创建Excel.IO对象

constructor() {
    
    

this.spread = new GC.Spread.Sheets.Workbook();

this.excelIO = new Excel.IO();

}

//初始化对象

workbookInit(args: any) {
    
    

//表格对象内容

//举例：设置第一个表格的内容为“Test Excel”且背景颜色为蓝色。

//const self = this;

// self.spread = args.spread;

// const sheet = self.spread.getActiveSheet();

// sheet.getCell(0, 0).text('Test Excel').foreColor('blue');

}

（设

テーブルのサイズと内容を構成します)

2. アップロードボタンとダウンロードボタンを設定します。

src/app/app.component.html のアップロードボタンとダウンロードボタンを初期化します。

\<div class='maincontainer'\>

\<!--初始化上传按钮--\>

\<div class='loadExcelInput'\>

\<p\>Open Excel File\</p\>

\<input type="file" name="files[]" multiple id="jsonFile" accept=".xlsx" (change)="onFileChange(\$event)" /\>

\</div\>

\<!--初始化下载按钮--\>

\<div class='exportExcel'\>

\<p\>Save Excel File\</p\>

\<button (click)="onClickMe(\$event)"\>Save Excel!\</button\>

\</div\>

\</div\>

（初始化上传、下载按钮）

在src/app/app.component.ts中添加上传、下载按钮的方法：

//上传文件代码

onFileChange(args: any) {
    
    

const self = this, file = args.srcElement && args.srcElement.files && args.srcElement.files[0];

if (self.spread && file) {
    
    

self.excelIO.open(file, (json: any) =\> {
    
    

self.spread.fromJSON(json, {
    
    });

setTimeout(() =\> {
    
    

alert('load successfully');

}, 0);

}, (error: any) =\> {
    
    

alert('load fail');

});

}

}

//下载文件代码

onClickMe(args: any) {
    
    

const self = this;

const filename = 'exportExcel.xlsx';

const json = JSON.stringify(self.spread.toJSON());

self.excelIO.save(json, function (blob: any) {
    
    

saveAs(blob, filename);

}, function (error: any) {
    
    

console.log(error);

});

}