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最新正式版下載

Telerik_KendoUI技術交流群（QQ）：726377843

有幾種情況可以應用此方法：

• 開始從傳統的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應用。(下期見......)

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都科技是Telerik的中國區的合作伙伴，Telerik作為用戶界面領域的優秀產品，通過全棧式開發工具套件（涵蓋Web、桌面、移動端及報表服務）提供160+高性能UI組件、低代碼平臺及實時調試工具，助力企業快速構建跨平臺業務應用（如ERP、數據分析儀表盤），顯著縮短開發周期（降本50%以上）并提升數據處理與界面交互效率。