如何使用 ngx-bootstrap 创建通用通知，如烤面包机通知

Question

我是 Angular 2 和 4 的新手。我想使用 ngx-bootstrap 警报和模态创建自定义通知。我已经搜索并得到了一些样本。但这些并不简单。我只需要一个简单的蓝图来创建带有服务、接口和组件的通知。

请任何人用示例代码指导我。

Answer 1

ngx-bootstrap - Alerts 的官方文档。
ngx-bootstrap - Modals 的官方文档。
那里提供 API 文档和使用场景以及实际示例。

---

为了快速参考，我会给你一个简单的警报框的代码 - 下面的用法和演示：

首先，在你的根模块中导入ngx-bootstrap：

import { AlertModule } from 'ngx-bootstrap';

@NgModule({
  imports: [AlertModule.forRoot(),...]
})
export class AppModule(){}

---

HTML 部分 template:

<alert type="success">
  <strong>Well done!</strong> You successfully read this important alert message.
</alert>

---

Component 的代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'demo-alert-basic',
  templateUrl: './basic.html'
})
export class DemoAlertBasicComponent {}

Answer 2

如何使用 ngx-bootstrap 创建通用通知，如烤面包机通知

Angular 2 Toasty 组件为您的应用程序显示咆哮式警报和消息。
在线演示可用here。

---

• 只需像安装任何其他 npm 包一样安装它：
  npm install ng2-toasty --save

• 如果您使用 SystemJS 加载文件，请更新配置文件：

  System.config({ map: { 'ng2-toasty': 'node_modules/ng2-toasty/bundles/index.umd.js' } });