Question

我正在尝试在使用Angular-CLI的Angular 2应用程序中使用npm中的 progressbar.js 库。

我用Sub Departments() Application.ScreenUpdating = False Range("B2").Select Dim TitleString As Range, cel As Range Set TitleString = ActiveCell Do Until IsEmpty(ActiveCell) For Each cel In TitleString If InStr(1, cel.Value, "1 ") > 0 Then For i = 1 To 15718 'Cells you want the system to check against titles searchcell = ThisWorkbook.Worksheets("All Titles").Cells(i, "B").Value Set Cell = Selection.Find(What:=searchcell, After:=ActiveCell, LookIn:=xlValues, _ LookAt:=xlWhole, SearchOrder:=xlByRows, SearchDirection:=xlNext, _ MatchCase:=False, SearchFormat:=False) If Cell Is Nothing Then Else 'found a result 'your code to copy paste classfiication from another list goes here Sheets("All Titles").Range("A4").Copy Destination:=Sheets("Department").Range("C" & Rows.Count).End(xlUp).Offset(1) Exit For End If Next i End If Sheets("All Titles").Range("B1").Copy Destination:=Sheets("Department").Range("C" & Rows.Count).End(xlUp).Offset(1) 'This copies N/A to the first free cell in column C Next cel ActiveCell.Offset(1, 0).Select Loop Application.ScreenUpdating = True End Sub安装了它。 progressbar.js的文档说它与npm install progressbar.js --save一起使用，我无法使用它，因为我没有SystemJS。

我搜索了一下，找到了一个解决方案，将它包含在angular-cli.json的scripts数组中，我做了：

var ProgressBar = require('progressbar.js')

应用程序与"scripts": [ "../node_modules/progressbar.js/dist/progressbar.js" ],编译良好，但我真的无法计算如何使用包含的库。在我的组件中，我尝试了不同的导入语句，例如ng serve或import * as Progressbar from 'progressbar.js/dist'，但没有让它们起作用。

有谁知道如何使用这个库？

Answer 1

由于ProgressBar未导出为TypeScript类，因此您无法使用import语句将其导入组件。

在angular-cli.json的脚本数组中包含progressbar.js文件后，足以在需要使用它的组件中添加以下行：declare var ProgressBar: any;。此语句是一种解决方法，可以在TypeScript类中使用第三方JavaScript库。

示例app.component.js - 只需在控制台中打印对象：

import { Component, OnInit } from '@angular/core';
declare var ProgressBar: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';

  ngOnInit() {
    console.log(ProgressBar);
  }
}

使用Angular-CLI在Angular中包含和使用NPM库

1 个答案: