Angular JS 級聯通知

Question

我需要你的建議來幫助我。

我正在制作一個 Angular JS 應用程序，我需要一些通知，如angular-toastr或angular-ui-notification但顯示的不是列表而是級聯。 如下圖所示。

任何人都可以幫助提供建議或實現此類通知嗎？

Answer 1

所以我認為你想要做的是分而治之這個問題：將 UI 視為一組組件。 對於上面的圖片，您可能有以下內容。

// Notification Cascacder applies DOM transformations to a list of 
<notification-cascader>
      // Iterates over a list of notifications
      <notification-list>
             // Contains primary DOM for a notification
             // accepts a variety of arguments for opacity, notification-message, etc. 
            <notification-card> </notification-card>
      </notification-list>
</notification-cascader>

現在您已經分解了它，您可以確定每個組件的 API 可能是什么，編寫測試，然后對組件進行編碼。 以這種方式編寫它會增加每個角度組件的可重用性。 您可以在應用程序的某些部分使用一個沒有其父級的通知卡。 盡管它與 angularjs 無關，但您可以閱讀此內容並應用這些概念https://reactjs.org/docs/thinking-in-react.html