Telerik生态整合：Kendo UI for Angular组件在WinForms应用中的深度嵌入（一）

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库，加快开发速度。Telerik DevCraft提供完整的工具箱，用于构建现代和面向未来的业务应用程序，目前提供UI for ASP.NET MVC、Kendo UI、UI for ASP.NET AJAX、UI for WPF、UI for Xamarin、Reporting等众多控件。

在这篇文章中，我们将演示如何在Telerik UI for WinForms应用程序中使用Kendo UI for Angular组件。您将了解其中的陷阱，以及如何从WinForms实现与Angular的通信，并从Angular获取事件。

Telerik 2025 Q1最新正式版下载

有几种情况可以应用此方法：

• 开始从传统的WinForms应用程序迁移到Angular
• 本地资源集成（本地数据库和其他WinForms资源）
• 在复杂的WinForms应用程序中构建轻量级UI应用程序
• 构建具有Web应用程序外观和感觉的WinForms应用程序
• 执行在Docker、IIS或Cloud中运行的分布式UI
• 无需更新WinForms应用程序客户端应用程序即可更新UI

这些来自遗留应用程序的转换场景可以帮助您在开发新的服务/应用程序时使用激活的生产资源，混合解决方案可以保留当前的WinForms，同时授权开发人员构建客户端应用程序。

入门指南

要复制这个示例，您必须创建一个WinForms应用和一个Angular项目来承载所需的控件。如果正在集成一个旧的WinForms应用，只需要创建Angular项目。

在终端提示符上安装最新版本的Angular：

npm install -g @angular/cli.

进入目标目录，例如C:\Telerik，并创建新项目：

ng new my-app

选择CSS的选项：

启用或禁用SSR（服务器端呈现）或SSG（静态站点生成）。对于小型应用程序，我更喜欢SSG，来避免持续的网络流量：

等待安装完成：

Kendo UI for Angular App

按照以下步骤配置和使用来自WinForms的控件。

我们将使用Kendo UI，特别是Kendo UI for Angular饼图控件。在创建图表及其功能之前，安装它以便应用程序可以访问它。在my-app项目的根目录下，输入这个安装命令：

ng add @progress/kendo-angular-charts

这个命令为我们做了很多事情（比如安装图表及其依赖项），现在将kendo-angular-charts添加到main中，有必要创建页面和组件主机，并添加接口和CustomEvent来返回数据。

1. 开始使用喜欢的控件创建页面，生成一个名为graph-control的angular组件来存放这些组件，graph-control将承载Angular图表组件：

ng g c graph-control

2. 将新组件添加到app.routes.ts中，即组件所在页面的路由：

import { Routes } from '@angular/router';
import { GraphControlComponent } from './graph-control/graph-control.component';export const routes: Routes = [
{
path: 'graph-control',
component: GraphControlComponent
}
];

3. 使用命令行创建组件来承载控件，在这个示例中，我们目前只演示了图表组件：

ng g c win-chart

4. 自定义控件。

添加将用于交换与WinForms集成的数据（receiveData）的接口，您可以添加多个接口来传输数据：

1. declare global {
2. interface Window {
3. receiveData: (data: any) => void;
4. }
5. }

现在在WinChart组件中，需要创建一个公共的winFormsData: any = null; 变量来保存数据。

5. 接下来，让我们结合本地存储来保存数据。可以用它来存储页面刷新之间的数据，在init函数中，可以从本地存储中获取数据并更新winFormsData值（如果savedData存在）。

1. public winFormsData: any = null;
2. constructor() {
3. window.receiveData = (data: any) => {
4. this.winFormsData = data;
5. localStorage.setItem('winFormsData', JSON.stringify(data));
6. };
7. }
8.
9. ngOnInit() {
10. const savedData = localStorage.getItem('winFormsData');
11. if (savedData) {
12. this.winFormsData = JSON.parse(savedData);
13. }
14. }

在component.html中为图表添加一个click事件：

1. onSeriesClick(event: SeriesClickEvent): void {
2. const category = event.category;
3. const value = event.value;
4.
5. console.log('Category:', category);
6. console.log('Value:', value);
7.
8. const message = JSON.stringify({ category, value });
9.
10. // Create a new custom event
11. const eventClick = new CustomEvent('MyClick', {
12. detail: { message: message }, // Pass any necessary data
13. });
14.
15. window.dispatchEvent(eventClick);
16. }

提示：这是一个陷阱；注意您将返回的JSON。错误的JSON格式会导致交付崩溃：

1. const message = JSON.stringify({ category, value });

从win-chart.component.html中删除默认的HTML，继续添加一个Kendo UI Chart，它将使用我们刚刚创建的系列点击。

1. <div *ngIf="winFormsData === null">Loading....</div>
2. // check the var winFormsData
3.
4. <div *ngIf="winFormsData !== null">
5. <kendo-chart
6. (seriesClick)="onSeriesClick($event)">
7. <kendo-chart-title
8. color="black"
9. font="12pt sans-serif"
10. text="WinForms x Angular - Data integration"
11. >
12. </kendo-chart-title>
13. <kendo-chart-legend position="top"></kendo-chart-legend>
14. <kendo-chart-series>
15. <kendo-chart-series-item
16. [data]="winFormsData"
17. [labels]="{ visible: true, content: label}"
18. [type]="typeChart"
19. categoryField="name"
20. colorField="color"
21. field="value">
22. </kendo-chart-series-item>
23. </kendo-chart-series>
24. </kendo-chart>
25. </div>

在图形控件页面上，添加要绑定的HTML：

1. <app-win-chart></app-win-chart>

为了加快速度，我将提供win-chart.component.ts的完整文件：

1. import { Component } from '@angular/core';
2. import { ChartsModule, LegendLabelsContentArgs, SeriesClickEvent, SeriesType } from "@progress/kendo-angular-charts";
3. import { CommonModule } from '@angular/common';
4.
5. declare global {
6. interface Window {
7. receiveData: (data: any) => void;
8. }
9. }
10.
11. @Component({
12. selector: 'app-win-chart',
13. standalone: true,
14. imports: [ChartsModule, CommonModule],
15. templateUrl: './win-chart.component.html',
16. styleUrls: ['./win-chart.component.css']
17. })
18. export class WinChartComponent {
19. public winFormsData: any = null;
20. public typeChart: SeriesType = "pie";
21.
22. constructor() {
23. window.receiveData = (data: any) => {
24. this.winFormsData = data;
25. localStorage.setItem('winFormsData', JSON.stringify(data));
26. };
27. }
28.
29. ngOnInit() {
30. const savedData = localStorage.getItem('winFormsData');
31. if (savedData) {
32. this.winFormsData = JSON.parse(savedData);
33. }
34. }
35.
36. public label(args: LegendLabelsContentArgs): string {
37. return `${args.dataItem.name}`;
38. }
39.
40. onSeriesClick(event: SeriesClickEvent): void {
41. const category = event.category;
42. const value = event.value;
43.
44. console.log('Category:', category);
45. console.log('Value:', value);
46.
47. const message = JSON.stringify({ category, value });
48.
49. // Create a new custom event
50. const eventClick = new CustomEvent('MyClick', {
51. detail: { message: message }, // Pass any necessary data
52. });
53.
54. window.dispatchEvent(eventClick);
55. }
56.
57. }

现在Angular应用已经准备好了，接下来我们将继续介绍如何使用WinForms应用。(下期见......)