Angular2元件庫 - Modal元件實作詳解（一）

       directive模式非常符合angular2的設計思想，是以開發過程也是順風順水。使用的方法也非常的正常。

       但實際上這中directive的方法局限性很大，需要預設好modal的内容，使用的時候需要對modal進行顯示和隐藏。這樣做的弊端非常明顯，需要modal内部的内容相對固定，如果一個頁面有很多使用modal的地方，需要再template裡加入很多的modal代碼，非常難維護，使用起來也不靈活。

       是以我們平時更多使用的是service的模式，調用元件庫提供的一個方法，例如<code>modalservice.open(...)</code> 傳入一些配置，就可以根據配置建立并展示相應的modal，關閉彈窗的時候，modal同時被銷毀。來無影去無蹤，用起來輕松惬意。

       但是理想很豐滿，現實很骨感。在實作service模式的過程中碰到了無數的坑，幾乎翻遍了google上所有的angular2相關的stackoverflow、部落格和gitbub。總共花費了近一個月時間，完成了modal主體功能開發。接着中間經曆了angular2版本從rc4 -&gt; rc5 -&gt; 穩定版的一波波架構大改，最後終于在11月份完成所有的改動。

service的内容能夠支援三種不同的格式：

文本

自定義模闆

自定義component

并且能夠支援自定義component的内外資料互動。最終實作的效果是這樣的：

       在開發過程中碰到無數的問題，在這第一篇中我會分享一下最大的一個問題。其他的問題我會在第二篇中來細講。

       那麼這個最大的問題是什麼呢？這個問題就是通過原生js在body裡加入一個<code>&lt;nz-modal&gt;&lt;/nz-modal&gt;</code>的dom，如果将這個dom加入到angular的zone裡進行modal的初始化。這個問題的關鍵是angular2的api：<code>applicationref.bootstrap</code>

主要的代碼如下：

       bootstrap團隊的實作方式跟我的方法是一樣的。我當時能發現這個方法，也是運氣。當時已經幾乎用盡所有的辦法，隻能嘗試去看angular2的源代碼，最後在源代碼裡找到了靈感，而且當時文檔也不完善，這個方法并沒有被挖掘。不過我是不是世界上第一個找到這個方法來實作的，也不好說，畢竟前端界大牛太多，很多人可能找到了但沒有分享出來而已。

modal的第一篇就到這裡，第二篇中我會詳細分享開發modal中所有踩過的坑，有些可能在現在的angular2新版本中已經被修複，但很多問題還是值得借鑒的。