当尝试将SimpleBar导入到角2应用程序时，x不是构造函数。

Question

我已经闲逛了好几个小时了，但不能让这件事起作用。我想在我的应用程序中导入SimpleBar，但失败得很惨。

TypeError: simplebar_1.SimpleBar不是构造函数

今天早些时候，我设法使npm包正常工作，但是调整大小有一些奇怪的问题，而且由于npm包只附带了小型化的版本，所以我求助于获得“真实的东西”。

我试图用这样的指令来包装这个

import {
    Directive,
    Input,
    ElementRef,
    AfterViewInit
} from '@angular/core';

import { SimpleBar } from 'simplebar';

@Directive({
    selector: '[simpleBar]'
})
export class SimpleBarDirective implements AfterViewInit {
    constructor(private elementRef: ElementRef) { }

    ngAfterViewInit() {
        new SimpleBar(this.elementRef.nativeElement, {
            autoHide: true
        });
    }
};

然而，这给了我上面的错误信息。幸运的是，我成功地启动并运行了一个显示完全相同错误的柱塞。

我在这里错过了什么？

Answer 1

问题

在src/simplebar中，通过执行export default class SimpleBar{....}将导出声明为默认值，然后使用import {SimpleBar} from 'simplebar'导入

您只能通过不带括号的import SimpleBar from 'simplebar'导入默认导出。

当您想从文件中导入多个东西时，使用括号导入样式。

import {SimpleBar, SimpleDialog, SimpleModal} from 'simplethings'

这样，文件中就不会有default导出。

解决方案

使用import SimpleBar from 'simplebar' 或删除类导出中src/simplebar中的default修饰符

Answer 2

看看这里，simplebar的源代码。https://github.com/Grsmto/simplebar/blob/master/src/simplebar.js

他们正在使用export default。他们不出口SimpleBar。因此，修正您的导入语法。

import * as SimpleBar from 'simplebar';