Angular6如何引入第三方插件和Angular6如何使用echarts--如china.js

最新推荐文章于 2021-11-03 08:58:14 发布

winner_corl

最新推荐文章于 2021-11-03 08:58:14 发布

阅读量1.1k

点赞数

分类专栏： angular6 文章标签： echarts angular6 第三方插件

本文链接：https://blog.csdn.net/Sicily_winner/article/details/90407659

版权

本文介绍了在Angular6项目中如何引入第三方插件，以jQuery为例，详细阐述了引入步骤。同时，讲解了Angular6中使用Echarts图表库的方法，特别是如何配置AppComponent.html和相关typescript代码。当常规方式无法正常工作时，提供了一种在Angular4中添加china.js的应急解决方案，包括require导入和ts代码的添加。

摘要由CSDN通过智能技术生成

如何引入第三方插件以jquery为例

1.安装
npm install --save jquery

2.angular.json 配置
"styles": [
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js"
]

3.$是javaScript的AppCompoment是TyptScript的，不能直接引用，将对应的类型文件安装本地库
npm install @types/jquery --save-dev

4.使用
import * as $ from 'jquery';
// 可以在ngOninit方法中打印进行测试
console.log($('body'));

如何使用echarts

1.安装
npm install echarts --save
npm install ngx-echarts --save

2.app.modules.ts根模块中引入 NgxEchartsModule
import {NgxEchartsModule} from "ngx-echarts";


@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxEchartsModule

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }


3.demo如下