在Angular
中,我想延迟加载一些模块,例如amcharts
。
我知道该怎么做,但是编辑器中的类型提示怎么样?
这是我的代码:
import {AfterViewInit, Component, NgZone, OnInit} from '@angular/core';
// import * as am4core from '@amcharts/amcharts4/core';
// import * as am4charts from '@amcharts/amcharts4/charts';
// import am4themes_animated from '@amcharts/amcharts4/themes/animated';
@Component({
selector: 'app-wykres',
templateUrl: './wykres.component.html',
})
export class WykresComponent implements OnInit, AfterViewInit {
private am4core: any;
private am4charts: any;
private am4themesAnimated: any;
chart: any;
constructor(private zone: NgZone) {
}
ngOnInit() {
}
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
this.loadAmcharts()
.then(() => {
console.log('loaded', this.am4charts, this.am4themesAnimated, this.am4core);
this.am4core.useTheme(this.am4themesAnimated);
let chart = this.am4core.create('chartdiv', this.am4charts.XYChart);
chart.paddingRight = 20;
let data = [];
let visits = 10;
for (let i = 1; i < 366; i++) {
visits += Math.round(
(Math.random() < 0.5 ? 1 : -1) * Math.random() * 10
);
data.push({
date: new Date(2018, 0, i),
name: 'name' + i,
value: visits
});
}
chart.data = data;
let dateAxis = chart.xAxes.push(new this.am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
let valueAxis = chart.yAxes.push(new this.am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;
let series = chart.series.push(new this.am4charts.LineSeries());
series.dataFields.dateX = 'date';
series.dataFields.valueY = 'value';
series.tooltipText = '{valueY.value}';
chart.cursor = new this.am4charts.XYCursor();
let scrollbarX = new this.am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
this.chart = chart;
});
});
}
private async loadAmcharts(): Promise<any> {
this.am4core = await import('@amcharts/amcharts4/core');
this.am4charts = await import('@amcharts/amcharts4/charts');
this.am4themesAnimated = await import('@amcharts/amcharts4/themes/animated').then(resp => {
return resp.default;
});
}
}
在 loadAmcharts
中,我正在加载模块并将它们分配给属性。但这些都是任何类型。
如果我评论:
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';
amchart
位于主包中。
我可以延迟加载模块并在编辑器中提供类型提示吗?
最佳答案
这是一个好问题。
这更多的是 TypeScript/IDE 问题,例如我找到了这个issue它描述了提示静态/动态导入之间的区别:
静态:
[...] .d.ts files are a static representation of what exists at runtime, and can be produced from TypeScript code or written manually for libraries that were not written in TS.
动态:
Not everything can just be inferred - capturing precise behavior would require literally running your program.
那么我们如何在编码时强制 TS 知道我们的类型是什么? TypeScript 2.9 introduced a feature "import
types" ,这仅适用于您的 IDE,以下是它在您的情况下的工作方式:
private am4core: typeof import ('@amcharts/amcharts4/core');
private am4charts: typeof import ('@amcharts/amcharts4/charts');
private am4themesAnimated: typeof import ('@amcharts/amcharts4/themes/animated').default;
现在你应该得到代码提示:
const core = this.am4core;
const charts = this.am4charts;
const animatedTheme = this.am4themesAnimated;
console.log('loaded', core, charts, animatedTheme);
core.useTheme(animatedTheme);
const chart = core.create('chartdiv', charts.XYChart);
屏幕截图(我使用 VS Code):
希望这有帮助!
关于angular - 延迟加载模块的类型提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54808105/