在Angular 7中使用bootstrap-notify

问题描述

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

I would like to use bootstrap-notify in my Angular 7 application.

为此，我已经安装了bootstrap-notify软件包(以及@types/bootstrap-notify).

To do this, I have installed the bootstrap-notify package (and also @types/bootstrap-notify).

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

In my component from where I want to use the notifications I imported the jQuery service like this:

import * as $ from 'jquery';

现在称为notify，如文档中此处所述:

And now called notify as described here in the documentation:

$.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)示例！

Any idea how to make it work? I couldn't find any Angular (5/6/7) example that is using this package!

推荐答案

您可以尝试以下方法.

1)首先为jquery安装类型定义:

1) First install type definition for jquery:

npm install @types/jquery

2)然后在组件文件中，导入jquery并通知和使用它们.

2) Then in component file, import jquery and notify and use them.

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

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

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

3) lastly, you also need to add css file/link to see it's actual styled.

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

有时会引发错误，但是如果您在代码中添加一些空格并保存，它将表现正确.

sometimes it throws error, but if you add some spaces to the code and save it, it will behave correctly.

这篇关于在Angular 7中使用bootstrap-notify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！