1.ngx-loading组件
使用加载提示组件
1.1.安装命令
npm install --save ngx-loading
1.2.引入组件
在app.module.ts中添加：
import {
BrowserModule } from '@angular/platform-browser';
import {
NgModule } from '@angular/core';
import {
NgxLoadingModule } from 'ngx-loading'; // 引入
@NgModule({
...
imports: [
...
NgxLoadingModule, // 引入
...
],
...
})
export class AppModule {
}
1.3.其他组件中调用
1.3.1.HTML代码
<ngx-loading [show]="downLoading" [config]="{ backdropBorderRadius: '3px' }"></ngx-loading>
1.3.2.ts代码
import {
Component, OnInit } from '@angular/core';
@Component({
})
export class AppComponent implements OnInit {
public downLoading = false;
constructor(private as: Service) {
}
ngOnInit() {
}
downFile() {
this.downLoading = true;
this.as.test().subscribe(res => {
this.downLoading = false;
}, err => {
this.downLoading = false;
});
}
}
文章来自于: ngx-loading官网.
2.ngx-echarts组件
2.1.安装
npm install echarts --save
npm install ngx-echarts --save
2.2.引入组件
在app.module.ts中添加：
import {
NgxEchartsModule } from 'ngx-echarts'; // 引入
@NgModule({
imports: [
...,
NgxEchartsModule.forRoot({
echarts: () => import('echarts') //使用此方式引入
})
],
})
export class AppModule {
}
2.3.BUG问题
2.3.1.装饰器不支持函数表达式错误:
Function expressions are not supported in decorators
Consider changing the function expression into an exported function.
则使用下面的引入：
import {
NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';
@NgModule({
imports: [
NgxEchartsModule.forRoot({
echarts,
}),
],
})
export class AppModule {
}
2.3.2.Cannot destructure property init
TypeError: Cannot destructure property 'init' of 'object null' as it is null：
这个时候需要使用：
import {
NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';
@NgModule({
imports: [
NgxEchartsModule.forRoot({
echarts: {
init: echarts.init }
}),
],
})
export class AppModule {
}
原因是：使用的版本低于5.0
2.3.3.Cannot destructure property createHash
如果出现以下错误TypeError: Cannot destructure property 'createHash' of 'undefined' or 'null'
npm add webpack@latest
webpack版本原因，需要升级版本
2.3.4.Cannot destructure property compile
出现错误，TypeError: Cannot destructure property 'compile' of 'undefined' or 'null'.
npm install -D [email protected]
问题：webpack-dev-server版本过高引起，重新安装3.0.0版本
2.3.其他组件中调用
2.3.1.HTML代码
<div echarts [options]="options" class="demo-chart" style="width: 100%; height: 560px;"></div>
2.3.2.TS代码
import {
Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
options: any;
constructor() {
}
ngOnInit(): void {
const xAxisData = [];
const data1 = [];
const data2 = [];
for (let i = 0; i < 100; i++) {
xAxisData.push('category' + i);
data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
this.options = {
legend: {
data: ['bar', 'bar2'],
align: 'left',
},
tooltip: {
},
xAxis: {
data: xAxisData,
silent: false,
splitLine: {
show: false,
},
},
yAxis: {
},
series: [
{
name: 'bar',
type: 'bar',
data: data1,
animationDelay: (idx) => idx * 10,
},
{
name: 'bar2',
type: 'bar',
data: data2,
animationDelay: (idx) => idx * 10 + 100,
},
],
animationEasing: 'elasticOut',
animationDelayUpdate: (idx) => idx * 5,
};
}
}
2.4.更新图表
在使用过程中，发现在初始化之后生成图表，无法进行更新修改，这个时候echart提供如下方案
HTML：
<div echarts [options]="chartOption" class="demo-chart" style="width: 100%; height: 560px;" (chartInit)="onChartInit($event)"></div>
TS：(调用echartsIntance即可)
chartOption:any; // 为已加载好的数据
echartsIntance: any;
onChartInit(ec: any) {
this.echartsIntance = ec;
}
changeFunction() {
this.chartOption.xAxis.name='TEST1111';
if(this.echartsIntance) this.echartsIntance.setOption(this.chartOption, true);
}
问题：在初始化的时候，我们不要使用echartsIntance，因为这个时候echartsIntance为undefine，在初始化的时候，如果能获取到数据，那么直接在ngOnInit中对chartOption进行赋值。
具体使用请参考网站：W3Cschool
3.ngx-translate
3.1.安装
3.1.1. 版本
版本1
- Angular 版本： 8.3.26
- ngx-translate/core 版本：11.0.1
- ngx-translate/http-loader版本：4.0.0
3.1.2.命令
npm install @ngx-translate/[email protected] --save
npm install @ngx-translate/[email protected] --save
安装好后，在package.json中会出现：
"dependencies": {
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0"
},
3.2.引入TranslateModule
在app.module.ts中引入
import {
TranslateModule, TranslateLoader } from '@ngx-translate/core';
import {
TranslateHttpLoader } from '@ngx-translate/http-loader';
import {
HttpClient, HttpClientModule} from '@angular/common/http';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
...
imports: [
...
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
})
],
...
})
3.3.创建json语言包
在app.module.ts中, 就已经定义了translate的语言包的路径为./assets/i18n/，文件格式为json。
所以创建一个zh.json的文件，内容如下：
{
"test":"测试"
}
3.4.组件中使用
3.4.1.在app-root组件下引入(建议)
import {
Component } from '@angular/core';
import {
TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(public translate: TranslateService) {
translate.setDefaultLang('zh');
translate.use('zh');
}
}
3.4.2.在ts中调用
在ngOnInit中使用
import {
TranslateService, TranslationChangeEvent } from '@ngx-translate/core';
export class TestComponent implements OnInit {
test: string;
constructor(public translate: TranslateService) {
}
ngOnInit() {
this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => {
test = this.translate.instant('test');
});
}
}
在其他方法中使用
let test = this.translate.instant('test');
3.4.3.在html中使用
<span>{
{ 'test' | translate}}</span>
4.ngx-toastr
4.1.安装
npm install ngx-toastr --save
npm install [email protected] --save //指定按本，注意angular版本和ngx-toastr版本的对应关系
如果没有安装animations，请先安装：
npm install @angular/animations --save
最后会在packing.json里面出现："ngx-toastr": "^10.1.0",
注意：安装的版本和angular的版本的关系：
| ngx-toastr | Angular |
|---|---|
| 6.5.0 | 4.x |
| 8.10.2 | 5.x |
| 10.1.0 | 8.x 7.x 6.x |
| 11.3.3 | 8.x |
| 12.1.0 | 9.x |
| current | >= 10.x |
由于我的angular版本时8.0的，因此引入的版本是10.1.0
4.2.引入
4.2.1.引入css
{
"projects":{
...
"styles": [
"src/styles.scss",
"node_modules/ngx-toastr/toastr.css" //需要引入的
],
}
4.2.2.引入module
在api.module.ts中引入
import {
BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
ToastrModule } from 'ngx-toastr';
@NgModule({
imports: [
...
BrowserAnimationsModule,
ToastrModule.forRoot(
{
timeOut: 5000, //显示的时间
positionClass: 'toast-top-center', //位置toast-top-center、toast-top-right、inline、toast-bottom-right等
preventDuplicates: true, //是否阻止重复信息
}
),
...
]
})
4.3.在组件或Service中使用
import {
Injectable } from '@angular/core';
import {
ToastrService } from 'ngx-toastr';
@Injectable()
export class TestService {
constructor(private toastr: ToastrService){
}
showErrorMsg(title: any, msg: any){
this.toastr.error(msg, title, {
closeButton: true});// 【错误】，closeButton：关闭按钮是否显示
}
showSuccessMsg(title: any, msg: any){
this.toastr.success(msg, title, {
closeButton: true});// 【成功】
}
showWarningMsg(title: any, msg: any){
this.toastr.warning(msg, title, {
closeButton: true});// 【警告】
}
showInfoMsg(title: any, msg: any){
this.toastr.info(msg, title, {
closeButton: true});// 【提示】
}
}