如何在angular 4中使用w2ui？请分享一个例子

Question

我正在尝试使用带有angular 4的w2ui。尝试了所有可能的web解决方案，但仍然面临一些或其他问题。请分享一个例子。这将是非常有帮助的。

错误：.w2grid:1020错误:未捕获(在promise中)：TypeError：$(...)core.es5.js不是函数

代码：

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import * as w2ui from 'w2ui';


import { PartnerService } from '../../services/partner.service';

@Component({
  selector: 'app-partners',
  templateUrl: './partners.component.html',
  styleUrls: ['./partners.component.css']
})
export class PartnersComponent implements OnInit {
  partners:Partner[];
  constructor(private partnerService: PartnerService) { 

    if(w2ui.hasOwnProperty('layout')){
        w2ui['layout'].destroy();
    }
    if(w2ui.hasOwnProperty('grid')){
        w2ui['grid'].destroy();
    }
    $('#grid').w2grid({
                name: 'grid',
                show: {
                    footer: true
                },
                columns: [
                    { field: 'fname', caption: 'Date Time', size: '200px',
                        render: function (record, index, column_index) {
                            var html = '<div>'+ record.fname + ' ' + record.lname + '</div>';
                            return html;
                        }
                    },
                    { field: 'email', caption: 'Subsystem', size: '100%' },
                    { field: 'profit',caption: 'ACCES Message Type', size: '120px', render: 'money' }
                ],
                records: 
                [
                        { recid: 1, fname: 'John', lname: 'Doe', email: 'john@gmail.com', profit: 2500},
                        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'stuart@gmail.com', profit: 1004},
                        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jin@gmail.com', profit: 473},
                        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'susan@gmail.com', profit: 304},
                        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'kelly@gmail.com', profit: 9300},
                ]
            });
  }

  ngOnInit() {
    this.partnerService.getPartners().subscribe((partners)=>{
        this.partners = partners;        
    });

  }

  supplierInit() {

    }

}

Answer 1

要使W2UI作为JQuery插件在您的组件中可用，您需要将其放入angular.json (以前是.angular-cli.json)中，如下所示：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
          "node_modules/w2ui/w2ui.min.js"
      ],
      "styles": [
          "node_modules/w2ui/w2ui.min.css"
        ],

这来自Angular文档：https://github.com/angular/angular-cli/wiki/stories-global-scripts#global-scripts

确保将W2UI添加到您的package.json

{
    // ...
    "dependencies": {
        // ...
        "w2ui": "^1.4.3"

在您的typings.d.ts中声明w2ui并将插件添加到JQuery接口：

// ...
declare var w2ui: any;
interface JQuery {
  w2layout(options?: any): any;
  w2toolbar(options?: any): any;
  w2sidebar(options?: any): any;
}

一旦完成此操作，就不需要

import * as $ from 'jquery';
import * as w2ui from 'w2ui';

在component.ts中。