共计 3956 个字符，预计需要花费 10 分钟才能阅读完成。
摘要：本文由葡萄城技术团队于 SegmentFault 原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
Angular15 新个性
Angular 框架（以下简称“Angular”）作为一款由谷歌开发的 Web 应用程序框架，其弱小的依赖注入零碎、可重复使用的模块化开发理念和响应式编程模式等特点让 Angular 一问世便获得了微小的关注和流量。截止目前为止，Angular 曾经迭代了 15 个版本，而 Angular15 又有哪些新的亮眼体现呢？小编为大家简略介绍几个 Angular15 的新个性（以下个性源于 Angular 官网）：
- 独立 API 脱离开发者预览版
在 Angular14 版本的更新中应用了独立的 API，使得开发者可能在不应用 NgModules 的状况下构建应用程序。在 Angular15 中将这些 API 曾经更新成为了稳定版，并且当前将通过语义版本去管制独立 APIs 的倒退。
- 基于 MDC 的组件公布到稳定版
Angular15 优化了基于 Material Design Components for Web（MDC）中 Angular material 对于组件的重构，这样使得 Angular 更加靠近 Material Design 的标准。对于大部分组件，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 globally
npm install -g @angular/cli// 通过 Angular CLI 创立一个新我的项目
ng new spread-sheets-app（初始化一个 Angular 工程）
将上面的表格资源粘贴到 package.json 文件中的 dependencies 标签，并应用 npm install 指令下载和 ng serve 指令运行。
"@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);
});
}（增加上传、下载按钮的办法）
当初能够应用 ng serve 指令启动我的项目并在浏览器中测试上传文件、批改文件内容和下载文件的操作了。
（零碎成果展现图）
代码地址 ：
https://gitee.com/GrapeCity/angular（Gitee）
https://github.com/GrapeCityXA/Angular-SpreadJS (Github)
扩大链接：
前端框架之争丨除了 Vue、Angular 和 React 还有谁与之争锋
Angular 性能优化实际——巧用第三方组件和懒加载技术
如何在 Angular CLI 上应用 SpreadJS
