angular 動(dòng)態(tài)組件類型詳解(四種組件類型)

更新時(shí)間：2017年02月22日 08:52:40 作者：miaowwwww

這篇文章給大家講解四種組件類型，非常不錯(cuò)，具有參考借鑒價(jià)值，對(duì)angular 動(dòng)態(tài)組件類型感興趣的朋友參考下吧

組件類型1：純函數(shù)功能，而沒(méi)有視圖部分，即Factory(類似于$http)

promise.component.html

常見(jiàn)的有內(nèi)置的$http，$q之類的。一般使用promise與作用域進(jìn)行交互

組件類型2：不是常駐于視圖，而是動(dòng)態(tài)插入的、有UI的一類組件，有輸入交互、不常被調(diào)用(類似于Model對(duì)話框)

factory.component.html

并發(fā)性。這里收到es6的啟發(fā)。在factory內(nèi)使用了構(gòu)造函數(shù)，來(lái)區(qū)分不同的實(shí)例。當(dāng)然，factory接口返回的類型要根據(jù)需求來(lái)定：僅僅是一個(gè)promise?還是返回一整個(gè)組件的實(shí)例

數(shù)據(jù)驅(qū)動(dòng)。factory內(nèi)部我使用了this.scope = $rootScope.$new()。并把每個(gè)實(shí)例的模板和作用域進(jìn)行綁定$compile(html())(scope)。感謝毛總，這招真是方便。我們能夠真正使用到angular的精髓：用數(shù)據(jù)來(lái)驅(qū)動(dòng)我們的視圖了

交互。該demo因?yàn)樾枰c用戶進(jìn)行交互，因此返回了一個(gè)promise給調(diào)用者。當(dāng)然實(shí)際要看情況。

作用域。由于該組件并不常常需要被調(diào)用，因此一旦組件'close'(從視圖上消失)，就scope.$destroy()、instance.remove()

組件類型3：不常駐于視圖，但會(huì)被經(jīng)常調(diào)用，而且是動(dòng)態(tài)插入的、無(wú)輸入交互、有UI的一類組件(類似于popover)

factory.component2.html

對(duì)比。與上類型組件對(duì)比，該類組件更容易被調(diào)用(類似于微信右上角的popover)
并發(fā)性。要求更高，稍復(fù)雜。因此返回組件的實(shí)例，讓開(kāi)發(fā)者可用調(diào)用組件內(nèi)部的方法(open/close/...)。同時(shí)，鑒于需求特殊性，在open()方法處我傳入了$event作為UI參數(shù)

作用域。由于是隱藏地常駐與視圖，因此只當(dāng)路由切換時(shí)才注銷實(shí)例。scope.$watch('$stateChangeSuccess', function(){scope.destroy()})

組件實(shí)例。賦值給作用域的變量 $scope.instance = Mypop.init()

組件類型4：實(shí)例之間存在某種關(guān)系、不常駐于視圖，動(dòng)態(tài)插入、只有視覺(jué)交互、有UI的一類組件(類似于ant design的Notification)

factory.component.3.html

對(duì)比。與上類組件對(duì)比，組件的每個(gè)實(shí)例之間需要存在某種隊(duì)列關(guān)系，具體操作方法請(qǐng)參考上面的例子。

實(shí)例關(guān)系。如何維護(hù)實(shí)例之間的關(guān)系？筆者比較笨的方法是開(kāi)啟另一個(gè)factory實(shí)例，存放一個(gè)實(shí)例數(shù)據(jù)，來(lái)維護(hù)實(shí)例之間的關(guān)系var _sl = scope.list = []。然后該factory具備操作實(shí)例隊(duì)列的一些方法 _sl.push(token)或者 _sl.shift()。同時(shí)每個(gè)實(shí)例都會(huì)監(jiān)聽(tīng)這個(gè)實(shí)例隊(duì)列 _s.$watchCollection('instanceList', function(){...})

您可能感興趣的文章: