在 Angular 7 中使用 bootstrap-notify

Question

我想bootstrap-notify在我的 Angular 7 应用程序中使用。

为此，我安装了该bootstrap-notify软件包（并且还安装了@types/bootstrap-notify）。

在我想要使用通知的组件中，我导入了 jQuery 服务，如下所示：

import * as $ from 'jquery';

现在按照文档中的描述notify进行调用：

$.notify({
    // options
    message: 'Hello World' 
},{
    // settings
    type: 'danger'
});

问题是我收到此错误：

ERROR in src/app/home/home.component.ts(28,7): error TS2339: Property 'notify' does not exist on type 'JQueryStatic'.

知道如何让它发挥作用吗？我找不到任何使用此包的 Angular (5/6/7) 示例！

Answer 1

您可以尝试以下操作。

1）首先安装jquery的类型定义：

npm install @types/jquery

2）然后在组件文件中，导入jquery并通知并使用它们。

import * as $ from 'jquery';
import 'bootstrap-notify';

$[`notify`](....);

3）最后，您还需要添加 css 文件/链接以查看其实际样式。

演示https://stackblitz.com/edit/angular-custom-alert-message-hqrysq?file=app%2Fapp.component.ts

有时它会引发错误，但如果您在代码中添加一些空格并保存它，它就会正常运行。