未显示DI的Angular2模态确认对话框

Question

Repro ：http://plnkr.co/edit/YLOf2BLMi93Jg5yOgA96

我试图通过调整http://koscielniak.me/post/2016/03/angular2-confirm-dialog-component/中的代码来使用Bootstrap样式而不是材料设计，为我的angular2应用程序使用一个简单的确认模式。

我喜欢这个确认对话框背后的想法，因为它很简单并且面向Angular2：您只需在组件中注入一个服务就可以调用确认对话框，并通过promise获取结果。该服务只是：

export class ConfirmService {
    public activate: (message?: string, title?: string) => Promise<boolean>;
}

通过此服务使用确认对话框。当在confirm组件中注入时，此服务的activate函数将绑定到该组件中的相应函数。该组件负责操纵DOM以显示对话框并返回结果（通过Promise）。

以下是组件的构造函数：

constructor(confirmService: ConfirmService) {
    confirmService.activate = this.activate.bind(this);
}

这样，我们必须：

1. 将组件添加到根应用程序组件的模板中，以便可以在整个组件树中使用它。
2. 注入此服务以在任何地方使用它。

现在这似乎工作和调试我可以看到绑定组件的函数被调用，并且DOM元素引用（通过document.getElementById获取，就像在我试图最小化我的原始代码中一样更改;我认为使用绑定的@ViewChild属性会更好）不是null。但是，当opacity设置为1时，对话框不会显示，控制台中也不会出现任何错误。您可以在本文顶部引用的Plunker中轻松查看。有什么建议吗？

Answer 1

所以，这里的实际问题，就我所说的你提供的plunker而言，就是你没有将元素样式的显示值从none更改为它将显示的位置。

为此，请将此行添加到show功能的末尾：

    this._confirmElement.style.display = 'block';

从你的分叉的Plunker： http://plnkr.co/edit/b3inbVhKK5PzV6NdQngq?p=preview

作为建议，您可以使用ViewChild和ElementRef以及模板变量命名来使事情更加强烈，并放弃您的ngOnInit分配。

<div #myModal>
@ViewChild('myModal') _confirmElement: ElementRef;