要在Angular 7中使用Toastr库并包含动画效果,需要包含@angular/animations
模块并导入BrowserAnimationsModule
。
下面是一个使用自定义Toastr和动画效果的示例:
npm install ngx-toastr --save
BrowserAnimationsModule
:import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule, // 添加BrowserAnimationsModule
ToastrModule.forRoot() // 导入ToastrModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(private toastr: ToastrService) {}
showToastr() {
this.toastr.success('这是一个成功的消息', '成功');
}
}
在这个示例中,当按钮被点击时,将显示一个成功的Toastr消息。
记得在模板中导入样式表。将以下代码添加到styles.css文件中:
@import "~ngx-toastr/toastr.css";
现在,当你启动应用程序时,你应该能够看到Toastr消息,并且它会包含动画效果。