jquery 不能在 Angular 2 中工作？答案

【问题标题】：jquery not working in Angular 2?jquery 不能在 Angular 2 中工作？
【发布时间】：2018-07-11 13:03:14
【问题描述】：

我有一个由 jquery 创建的动态下拉列表。在 Home Component 中有一个 id 为 currencyvalue 的 div，下拉菜单将由 common.js 和 jquery.ddslick.min.js 中的 jquery 函数在其上创建。之前加载的jquery 主页组件加载，这就是不填充下拉菜单的原因。

所以我想在加载 home 组件后加载 jquery，这样 jquery 函数才能工作。

代码：主页组件

Home Component.ts

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

import * as $ from  '../../assets/js/jquery.min.js';
import '../../assets/js/bootstrap.min.js';
import '../../assets/js/jquery.ddslick.min.js';
import '../../assets/js/common.js';

// import * as $ from 'jquery';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    
  }

}

/*      Common.js    */

Common.js

var ddData = [
{
    text: "Bitcoin",
    value: 1,
    selected: true,
    description: "",
    imageSrc: "images/bitcoin-icon.png"
},
{
    text: "Ethereum",
    value: 2,
    selected: false,
    description: "",
    imageSrc: "images/ethereum-icon.png"
},
{
    text: "Dash",
    value: 3,
    selected: false,
    description: "",
    imageSrc: "images/dash-icon.png"
},
{
    text: "Litecoin",
    value: 4,
    selected: false,
    description: "",
    imageSrc: "images/litecoin-icon.png"
}
];

$('#currencyvalue').ddslick({
data: ddData,
width: 190,
imagePosition: "left",
selectText: "Select your Choice",
onSelected: function (data) {
    console.log(data);
}
});

Home Component Html

<div class="col-sm-6">
                                <fieldset>
                                    <label for="selvalue" class="textwhite text-center font16 pb10">Crypto</label>
                                    <div id="currencyvalue">

                                    </div>
                                </fieldset>
                            </div>

【问题讨论】：

您的 jquery 函数调用在 home 组件中在哪里？在某些情况下，您必须从 ngOnInit/ngAfterViewInit 拨打电话，所以它会起作用
但是 jquery 函数在 common.js 文件中，我已经导入了
发布您想要在 HomeComponent 中执行的 jquery 代码
@Shantanu，我添加了 common.js 代码
感谢@Shantanu，我不知道 ngAfterViewInit 的 Angular 生命周期。从 ngAfterViewInit 我找到了解决方案。再次感谢

标签： javascript jquery html angular

【解决方案1】：

将您的 common.js 函数包装在一个函数中，可以这样说：

function InitializeDropdown(){
 $('#currencyvalue').ddslick({
 data: ddData,
 width: 190,
 imagePosition: "left",
 selectText: "Select your Choice",
 onSelected: function (data) {
    console.log(data);
 }
}

现在，在您的HomeComponent 中使用ngAfterViewInit 调用此函数

ngAfterViewInit(){
    (window as any).InitializeDropdown()
}

记住我没有测试过这段代码。

【讨论】：