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

Question

摄制：http://plnkr.co/edit/YLOf2BLMi93Jg5yOgA96

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

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

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

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

这里是组件的构造：

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

这样，我们不但要：

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

现在，这似乎工作和调试，我可以看到的是，结合元件的函数被调用，和DOM元素的引用（通过document.getElementById了，在原来的代码，我试图尽量减少我的变化，我想使用一个绑定的@ViewChild属性会更好）不为空。但是，当其对话框opacity设置为1时不显示对话框，控制台中也不会显示任何错误。你可以在这篇文章的顶部引用的Plunker中轻松地看到它。任何建议？

Answer 1

所以，从我提供的plunker中可以看出的实际问题是，您不会将元素样式的显示值从none更改为显示值。

要做到这一点，这一行添加到您的show函数的末尾： http://plnkr.co/edit/b3inbVhKK5PzV6NdQngq?p=preview

作为一个建议，你可以使用ViewChild和ElementRef与模板一起：

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

Plunker从你的分叉变量命名可以让事情变得更加强大，并排除你的ngOnInit分配。

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