要在Angular表单中显示Toastr消息,您可以按照以下步骤进行操作:
npm install ngx-toastr --save
import { ToastrModule } from 'ngx-toastr';
@NgModule({
imports: [
ToastrModule.forRoot()
],
...
})
export class AppModule { }
import { ToastrService } from 'ngx-toastr';
constructor(private toastr: ToastrService) { }
onSubmit() {
// 处理表单提交的逻辑
// 显示成功消息
this.toastr.success('表单提交成功!', '成功');
}
您还可以根据您的需求使用其他Toastr方法,例如error()
、warning()
、info()
等。
请确保在您的模板中添加Toastr的视图容器。您可以在app.component.html中的任意位置添加以下代码:
这样就可以在Angular表单中显示Toastr消息了。请根据您的需求自定义消息内容、类型和样式。