Angular Js 2 未加载 jquery 查询生成器内部脚本文件

Question

我的要求

需要使用 angularjs 2 typescript

在模式中加载 jquery 查询生成器

我做了什么

我在 angularjs 2 中创建了一个动态表单，其中包含 3 个 select 框和 1 个文本框，在单击该文本框时我调用了 bootstrap modal inside the modal body 我已经对查询生成器进行了编码，并在 template_rule.html

中为该查询生成器创建了一个内部 java 脚本

发生了什么

当我单击文本框时出现模态弹出窗口，在模态主体内只有三个按钮正在呈现，而主查询构建器视图未呈现。

这是完整的演示 link(http://plnkr.co/edit/d38iwjLhJzTjM5t46zD7?p=preview)

演示 Link 功能

在这个link中左上角会有一个按钮，点击它会继续添加一组字段，如果你点击那个文本框，那组字段中会有一个文本框将弹出一个模式，因为只有在呈现查询构建器时，按钮才会显示，但核心功能部分不会显示在该模式弹出窗口中，查询构建器脚本位于 app/template_rule.html 文件和必要的库包含在 index.html 文件中，请帮我解决这个问题

这是完整工作代码的一部分，请参考上面的link

import {Component} from 'angular2/core';
import {
        FORM_DIRECTIVES, FormBuilder, ControlGroup, ControlArray, Validators, NgForm, Control,
            AbstractControl
    }from 'angular2/common';

@Component({
selector: 'my-app',
templateUrl:'app/template_rule.html',
directives: [FORM_DIRECTIVES]
})
export class AppComponent {
userForm: ControlGroup;
constructor(private fb: FormBuilder) {
this.userForm = fb.group({
  rules_list:  new ControlArray([])
    });
    this.rules_list();
 }

 rules_list(){
    this.userForm.controls['rules_list'].push(this.fb.group({
        select_state: this.fb.control("",Validators.required),
        rules: this.fb.control("", Validators.required),
        pass_state: this.fb.control("", Validators.required),
        fail_state: this.fb.control("", Validators.required)
    }));
}

removeRules(ctrl) {
     let rulesLists = (<Array>(<ControlGroup>this.userForm.controls['rules_list']).controls);
    for(var i = 0; i < rulesLists.length; i++) {
         console.log("each rules", ctrl);
        if(rulesLists[i] == ctrl) {
         console.log("rules to remove", rulesLists[i]);
            rulesLists.splice(i, 1);
            (<ControlGroup>this.userForm.controls['rules_list']).updateValueAndValidity();
         break;
        }
    }
}

submitRules() {
     console.log(this.userForm.value)
    }
}

Answer 1

通过在 angular2 模板加载时动态加载查询生成器脚本文件解决了这个问题

下面是动态加载的代码

load_script(){
var head=document.getElementByTagName('head')[0];
var script=document.createElement('script');
script.type='text/javascript';
script.src='js file url'
head.appendChild(script);
}

Angular Js 2 未加载 jquery 查询生成器内部脚本文件

Angular Js 2 not loading the jquery query builder internal script files

jquery

query-builder

angular