时间戳

首页 > 解决方案 > 如何配置我的 Angular 6 环境，以便能够在 Angular 6 中为 jQuery 使用 Kendo UI 网格？

angular - 如何配置我的 Angular 6 环境，以便能够在 Angular 6 中为 jQuery 使用 Kendo UI 网格？

问题描述

让我问一个问题：我需要如何为 CLI Angular 2+（目前我正在使用 Angular 6）配置 webpack 以在 Angular 6 中为 jQuery 使用 Kendo UI 网格？

我的问题是我在 Angular 6 项目中添加了两个文件：kendo.all.min.js 和 jquery-1.12.4.min.js

在 html 文件中添加

<div id="grid"></div>

在 typescript 组件中，我添加了导入：

import * as kendo from '../../../../assets/kendo.all.min.js';
import * as jQuery from '../../../../assets/jquery-1.12.4.min.js';


  ngOnInit() {
    $(document).ready(function () {
      var dataSource = new kendo.data.DataSource({
        transport: {
          read: {
            url: "https://demos.telerik.com/kendo-ui/service/products",
            dataType: "jsonp"
          }
        },
        pageSize: 10
      });
      $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true
      });
    });
  }

在 ngOnInit 函数上，我在“.kendoGrid（{”行错误是：“ERROR TypeError：_assets_jquery_js__WEBPACK_IMPORTED_MODULE_7__（...）.kendoGrid 不是函数”

我的 angular.json 文件是：

"MyProject": {
      "root": "",
      "sourceRoot": "projects/src",
      "projectType": "application",
      "prefix": "projects/src",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/MyProject",
            "index": "projects/src/index.html",
            "main": "projects/src/main.ts",
            "polyfills": "projects/src/polyfills.ts",
            "tsConfig": "projects/src/tsconfig.app.json",
            "assets": [
              "projects/src/favicon.ico",
              "projects/src/assets"
            ],
            "styles": [
              "projects/src/styles.css",
              "node_modules/@progress/kendo-theme-default/dist/all.css",
              "assets/kendo/styles/kendo.common-bootstrap.min.css",
              "assets/kendo/styles/kendo.bootstrap.min.css",
              "assets/app-angular.css",
              "assets/main.css",
              "assets/index.css",
              "assets/angle/theme-f.css",
              "assets/fonts/fontawesome/css/font-awesome.min.css",
              "assets/fonts/simple-line-icons/css/simple-line-icons.css",
              "assets/fonts/katimavik/css/katimavik-font.css",
              "assets/angular/ngDialog/css/ngDialog.min.css",
              "assets/landing.css",
              "assets/adeco/adeco-katimavik.min.css"
            ],
            "scripts": [
              "projects/assets/kendo.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/src/environments/environment.ts",
                  "with": "projects/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Katimavik:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Katimavik:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Katimavik:build"
          }
        }
      }
    }

如何配置我的 Angular 6 环境，以便能够在 Angular 6 中为 jQuery 使用 Kendo UI 网格？

如果您需要更多详细信息，请告诉我。

谢谢你。

附言

我需要 Angular 6 中用于 jQuery 的 Kendo UI，因为我正在尝试从 AngularJS 迁移到 Angular 6。在 angularJS 内部，我使用了很多用于 jQuery 的剑道网格。

因此，如果我能够在我的项目中导入和设置 kendo.all.min.js，我不需要为 jQuery 重写每个剑道网格，而只需为 jQuery 重用现有的剑道网格。

标签： angularkendo-uikendo-ui-angular2

解决方案

我有同样的问题，它被剑道文件解决了。在下面，您可以看到快照。

 "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "projects/integration-jquery-partial/src/assets/kendo.custom.min.js"
    ]

它应该在 angular.json 中并将 jquery 导入到您的组件中，如下所示：

declare var $: any;

最后它可以通过@ViewChild('grid', { static: false }) pivot;.

grid 是 component.html 中的一个元素，它是这样定义的：

<div #grid></div>

推荐阅读