要在Angular5-Toaster中动态注入参数,可以使用ToasterService的pop方法来实现。
首先,确保已经安装了angular2-toaster依赖包:
npm install angular2-toaster --save
然后,在你的组件中,导入ToasterService:
import { Component } from '@angular/core';
import { ToasterService } from 'angular2-toaster';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
constructor(private toasterService: ToasterService) {}
showToaster() {
this.toasterService.pop('success', 'Toaster Title', 'Toaster Message');
}
}
在上面的示例中,我们在组件中注入了ToasterService,并在showToaster方法中调用了toasterService的pop方法。pop方法接受三个参数:toastType(类型),title(标题)和body(内容)。
你可以根据你的需求将这些参数动态传入。例如,你可以将它们作为组件的属性,并在showToaster方法中传入:
import { Component, Input } from '@angular/core';
import { ToasterService } from 'angular2-toaster';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
@Input() toastType: string;
@Input() title: string;
@Input() body: string;
constructor(private toasterService: ToasterService) {}
showToaster() {
this.toasterService.pop(this.toastType, this.title, this.body);
}
}
在这个示例中,我们将toastType,title和body作为组件的输入属性,并在showToaster方法中使用它们作为参数传递给toasterService的pop方法。
然后,你可以在父组件中使用这个动态的Toaster组件,并传入相应的参数:
在这个示例中,我们将toastType设置为'success',title设置为'Toaster Title',body设置为'Toaster Message'。
当点击按钮时,Toaster将以这些动态参数显示。你可以根据需要随时更改这些参数。