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;