Question

我正在尝试在Angular项目中使用外部库。这来自https://github.com/bramstein/fontfaceobserver

的文档

如果您正在使用npm，则可以将Font Face Observer安装为依赖项：

$ npm install fontfaceobserver
You can then require fontfaceobserver as a CommonJS (Browserify) module:

var FontFaceObserver = require('fontfaceobserver');

var font = new FontFaceObserver('My Family');

font.load().then(function () {
  console.log('My Family has loaded');
});

使用require导入库，但角度不喜欢该关键字。是否有一些导入库的标准方法？

Answer 1

如果它的webpack你应该只能使用es6导入它。刚刚安装它，这对我有用：

import FontFaceObserver from 'fontfaceobserver'

this.font = new FontFaceObserver('ariel');

this.font看起来像这样：

this.font = {
family:"ariel",
stretch:"normal",
style:"normal",
weight:"normal"
}

Answer 2

以下是导入组件的方式。

import FontFaceObserver from 'fontfaceobserver';

export class AppComponent {

  public fontFace: any;

  ngOnInit() {
    this.fontFace = new FontFaceObserver('ariel');
  }
}

在Angular中导入JS库

2 个答案: