Question

我试图在我的ng-2应用中使用这个jQuery插件https://github.com/kevinchappell/formBuilder。我知道这不是一个好习惯，但我还没有找到本地写入ng2的类似物（我需要拖放html表单构建器）。那么我应该选择什么方法呢？使用ng2组件包装jquery插件，如下所示：

import { Component, OnInit, ViewChild, AfterViewInit, ElementRef } from '@angular/core';

import * as jQuery from 'jquery';
import "../../../node_modules/formBuilder/dist/form-builder.min.js"

@Component({
  selector: 'form-builder',
  template: '<div class="build-wrap></div>"'
  styleUrls: ['./form-builder.component.css']
})
export class FormBuilderComponent implements AfterViewInit {
  formBuilderElement: any;

  constructor(private elementRef: ElementRef) { }

  ngAfterViewInit() {
    this.formBuilderElement = jQuery(this.elementRef.nativeElement).find('.build-wrap');
    this.formBuilderElement.formBuilder();
  }

}

不幸的是，这段代码不起作用。它产生了这个错误：

Error in ./AppComponent class AppComponent - inline template:17:6 caused by: this.formBuilderElement.formBuilder is not a function

这个项目是使用angular-2-cli生成的，所以我将所有必要的文件包含在我的angular-cli.json中，如下所示：

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/formBuilder/dist/form-builder.min.css",
    "../node_modules/formBuilder/dist/form-render.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/formBuilder/dist/form-builder.min.js",
    "../node_modules/formBuilder/dist/form-render.min.js"
  ]

我做错了什么？

在Angular 2 app中使用jquery插件

0 个答案: