在Angular 7中使用bootstrap-notify

Question

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

为此，我安装了bootstrap-notify包(以及@types/bootstrap-notify)。

在我想要使用通知的组件中，我像这样导入了jQuery服务：

import * as $ from 'jquery';

现在称为notify，就像文档中描述的here：

$.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

有时它会抛出错误，但如果您在代码中添加一些空格并保存它，它将正确运行。