Angular5-Toaster 动态组件注入参数

Question

下午好，

我正在尝试创建一个动态模板来显示来自 NPM 自述文件中列出的动态组件的信息。 https://www.npmjs.com/package/angular5-toaster

示例：

import {BodyOutputType} from 'angular5-toaster';

@Component({
  selector: 'dynamic-component',
  template: `<div>loaded via component</div>`
})
class DynamicComponent { }

var toast : Toast = {
    type: 'error',
    title: 'Title text',
    body: DynamicComponent,
    bodyOutputType: BodyOutputType.Component
};

this.toasterService.pop(toast);

我的问题是如何将参数传递给 DynamicComponent。

谢谢

Answer 1

我建议使用 Angular 服务共享数据。

第 1 步： 在加载 Toast 之前设置要传递给动态组件的数据。

    this.someService.data="some parameter"
    this.toasterService.pop(toast);

第 2 步： 组件初始化后，您可以通过将服务作为动态组件的依赖项注入来读取值。

ngOnInit(){
//read the data
console.log(this.someService.data)
}

Angular5-Toaster 动态组件注入参数

Angular5-Toaster Dynamic component inject parameters

angular-toastr

angular

angular6