feat: 添加toaster组件，但是存在兼容性文本

package.json

@@ -12,7 +12,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@angular/animations": "^7.2.3",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",

src/app/routes/notifications/toastr/toastr.component.html

@@ -1,3 +1,33 @@
-<p>
-  toastr works!
-</p>
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <i class="fa fa-align-justify"></i> Toastr
+          <div class="card-header-actions">
+            <a href="https://scttcper.github.io/ngx-toastr/" class="card-header-action" target="_blank">doc</a>
+          </div>
+        </div>
+        <div class="card-body">
+          <button type="button" class="btn btn-primary mr-1">
+            Try primary
+          </button>
+          <button type="button" class="btn btn-success mr-1" (click)="showSuccess()">
+            Try success
+          </button>
+          <button type="button" class="btn btn-warning mr-1">
+            Try warning
+          </button>
+          <button type="button" class="btn btn-danger mr-1">
+            Try danger
+          </button>
+          <button type="button" class="btn btn-info mr-1">
+            Try info
+          </button>
+        </div>
+      </div>
+    </div>
+    <!--/.col-->
+  </div>
+  <!--/.row-->
+</div>

src/app/routes/notifications/toastr/toastr.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-toastr',
@@ -7,7 +8,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ToastrComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private toastr: ToastrService
+  ) { }
+
+  showSuccess() {
+    console.log('t');
+    console.log(this.toastr);
+    const result = this.toastr.info('success', 'Hello world!');
+    this.toastr.success('Hello world!', 'Toastr fun!');
+    console.log(result);
+  }
 
   ngOnInit() {
   }

src/app/shared/shared.module.ts

@@ -4,6 +4,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { ToastrModule } from 'ngx-toastr';
 import { SharedBootstrapModule } from './shared.bootstrap.module';
 
 
@@ -15,6 +16,7 @@ import { SharedBootstrapModule } from './shared.bootstrap.module';
     PerfectScrollbarModule,
     SharedBootstrapModule,
     ChartsModule,
+    ToastrModule.forRoot(),
   ],
   exports: [
     CommonModule,
@@ -24,6 +26,7 @@ import { SharedBootstrapModule } from './shared.bootstrap.module';
     PerfectScrollbarModule,
     ChartsModule,
     RouterModule,
+    ToastrModule,
   ]
 })
 export class SharedModule {

src/styles.scss

@@ -12,4 +12,3 @@
 // or import a bootstrap 4 alert styled design (SASS ONLY) 
 // should be after your bootstrap imports, it uses bs4 variables, mixins, functions 
 // @import '~ngx-toastr/toastr-bs4-alert';
-