Angular5-Toaster 动态组件注入参数答案

【问题标题】：Angular5-Toaster Dynamic component inject parametersAngular5-Toaster 动态组件注入参数
【发布时间】：2018-11-15 15:40:13
【问题描述】：

下午好，

我正在尝试创建一个动态模板来显示来自 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。

谢谢

【问题讨论】：

为什么不能在加载组件之前将值设置为服务？组件初始化后，您可以读取值
真是个好主意，我不知道为什么我以前没有想到它。
谢谢..我会建议这个解决方案。还有另一种方法是创建组件的实例，但不推荐。您可以采用这种方法。
我已将此解决方案添加为答案，如果可行，您可以将其标记为答案

标签： angular angular6 angular-toastr

【解决方案1】：

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

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

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

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

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

【讨论】：