如何在页面加载时调用angular toaster

在页面加载时调用Angular Toaster可以通过以下步骤实现：

1. 安装Angular Toaster：首先，确保你的项目已经安装了Angular和Toaster依赖。可以通过以下命令使用npm进行安装：

npm install angular-toastr

1. 导入必要的模块：在你的Angular应用的模块文件中，导入Toaster模块和Toaster服务。例如，在app.module.ts文件中添加以下代码：

import { BrowserModule } from '@angular/platform-browser';

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

import { ToastrModule } from 'ngx-toastr';

import { AppComponent } from './app.component';

@NgModule({

 declarations: [

   AppComponent

 ],

 imports: [

   BrowserModule,

   ToastrModule.forRoot() // 导入Toaster模块

 ],

 providers: [],

 bootstrap: [AppComponent]

})

export class AppModule { }

1. 在组件中使用Toaster服务：在你想要显示Toaster通知的组件中，导入Toaster服务并在构造函数中注入它。例如，在app.component.ts文件中添加以下代码：

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

import { ToastrService } from 'ngx-toastr';

@Component({

 selector: 'app-root',

 templateUrl: './app.component.html',

 styleUrls: ['./app.component.css']

})

export class AppComponent {

 constructor(private toastr: ToastrService) {} // 注入Toaster服务

 ngOnInit() {

   this.showToaster(); // 在页面加载时调用showToaster方法

 }

 showToaster() {

   this.toastr.success('页面加载成功！', '成功'); // 调用Toaster服务的success方法显示通知

 }

}

1. 在模板中显示Toaster通知：在你的组件模板文件（例如app.component.html）中，添加一个Toaster容器，用于显示Toaster通知。例如：

<div>

 <toaster-container></toaster-container> <!-- 添加Toaster容器 -->

</div>

你也可以在模板中使用其他Toaster方法和选项来自定义通知的样式和行为。

以上步骤完成后，当页面加载时，Angular Toaster会自动调用showToaster方法，并显示一个成功的Toaster通知。

注意：在以上步骤中，我们使用了ngx-toastr库作为Angular Toaster的实现。你可以根据自己的需求选择其他类似的库或自行实现Toaster功能。