Question

我想在我的应用程序中使用此库：https://www.npmjs.com/package/jquery-animated-headlines

但是我不知道如何导入。

首先，我将这些行添加到我的angular-cli.json

$('#Items_0__BoldText')

第二，我安装了jQuery "styles": [ ... "../node_modules/jquery-animated-headlines/dist/css/jquery.animatedheadline.css" ], "scripts": [ ... "../node_modules/jquery-animated-headlines/dist/js/jquery.animatedheadline.min.js" ]

然后，我导入jquery：npm install jquery --save

最后，我复制/粘贴他们的示例：

TS：

import * as $ from 'jquery';

HTML：

constructor () {
   $(function() {
     $('.selector').animatedHeadline();
   })
}

我收到此错误：<div class="selector"> <h1 class="ah-headline"> <span>My favorite food is</span> <span class="ah-words-wrapper"> <b class="is-visible">pizza</b> <b>sushi</b> <b>steak</b> </span> </h1> </div>

我不知道我在做什么错... 谢谢

Answer 1

您无需在lib.json中包含您的库。将其导入您需要的地方。

首先，安装软件包：

npm install jquery jquery-animated-headlines --save

然后，转到所需的组件并将其导入：

import * as $ from 'jquery' // in case u haven't imported it globally.
import * as animatedHeadline from 'jquery-animated-headlines;


@Component()
...
constructor () {
    $(document).ready(() => $('.selector').animatedHeadline())
}

Answer 2

这就是我的工作方式，但是必须有更好的方法。我使用@ angular / cli version6创建了一个新项目。

npm install --save jquery jquery-animated-headlines

在angular.json文件中，将"node_modules/jquery-animated-headlines/dist/css/jquery.animatedheadline.css"添加到样式数组。

将app.component.html更新为：

<h2 #foo>Here are some links to help you start: </h2>

app.component.ts

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

import * as jQuery from 'jquery';
import 'jquery-animated-headlines';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  @ViewChild('foo') fooElement: ElementRef<any>;

  ngAfterContentInit(): void {
    $(this.fooElement.nativeElement).animatedHeadline();
  }
}

现在事情应该可以解决了，但是由于插件库的编写方式，似乎还不行。我还必须进入node_modules/jquery-animated-headlines/dist/js/jquery.animatedhealdine.js文件并更新其导入jquery的方式。

文件看起来像这样：

(function($) {
  .
  .
  .
}(jQuery));

，我不得不将其更新为：

(function (factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    }
    else if(typeof module !== 'undefined' && module.exports) {
        module.exports = factory(require('jquery'));
    }
    else {
        factory(jQuery);
    }
}(function ($, undefined) {
  .
  .
  .
}));

我不确定在Angular中是否有更好的方法来解决这个问题，并且在自动构建系统中不能很好地解决这个问题，但是对于本地开发，它应该可以正常工作。

更新

在应用程序中运行此方法的方法如下。

在angular.json文件中添加：

"node_modules/jquery/dist/jquery.js",
"node_modules/jquery-animated-headlines/dist/js/jquery.animatedheadline.js"

到脚本属性。

在组件中，使用declare var $: any;。例如：

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

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  @ViewChild('foo') fooElement: ElementRef<any>;

  ngAfterContentInit(): void {
    $(this.fooElement.nativeElement).animatedHeadline();
  }
}

GitHub repo。

将外部lib与Angular一起使用

2 个答案: