Question

我的应用程序包含 AppComponent 父级和 ProductComponent 子级。在 ProductComponent 中，我提供了一项服务，因为我希望该服务仅在 ProductComponent 范围及以下（对于任何未来的孙子组件）中可用。我不想在NgModule的根范围内提供全局服务。

@Component({
  selector: 'my-product',
  providers: [ MyService ],
  ...

我的 DialogComponent 取决于服务。但是当我从 ProductComponent ...

打开一个对话框时

export class ProductComponent {
  openDialog() {
    let dialogRef = this.dialog.open(DialogComponent);
  }  
}

......我得到一个例外： 错误：没有MyService的提供商

如何将提供的服务从 ProductComponent 转发到 DialogComponent ？

请参阅显示问题的我的最小Plunker sample。

Answer 1

您还需要在对话框组件中提供服务。

@Component({
  selector: 'my-dialog',
  providers: [ MyService ],
  template: `<div>Today's lottery number is {{service.lotteryNumber}}.</div>`,
})
export class DialogComponent {
  constructor(private service: MyService) { }
}

请查看更改的plunker：https://plnkr.co/edit/feYrKfG1CfW785mDERCv?p=preview

Answer 2

我在找到GitHub上描述的identical issue后设法解决了这个问题。

您需要将 MdDialogConfig 传递给dialog.open功能设置 viewContainerRef ，如下所示：

openDialog() {
  let config = new MdDialogConfig();
  config.viewContainerRef = this.viewContainerRef;
  let dialogRef = this.dialog.open(DialogComponent, config);
}

现在 DialogComponent 将从父 ProductComponent 中获取其相关服务。我有一个新的Plunker显示解决方案。

如何与MdDialog中的组件共享作用域服务？

2 个答案: