進階Angular 組件模式實例

Angular到現在已經到5.x的版本了，對於MVVM框架我首先接觸的是angularjs後來又轉為react，之後換了工作因項目技術棧的原因又轉換到之前的angularjs，在實際工作中實施了公司幾個比較重要專案中前端的重構工作，這個過程逐步意識到，對於MVVM框架本身，在使用層面講，掌握一些通用的模式是很有必要的，尤其現在已經很流行的組件化開發。這樣我們在實際工作中就可以無縫（或花很少的時間成本）轉換到任何的MVVM框架，並且把節省下來的時間去學習新的知識。

最近一直在關注Angular In Depth的博客，偶爾看到這個系列的文章，覺的質量還挺高，所以抽空餘時間翻譯並分享給大家，並在每個文章後面加了一點自己的拙見，希望可以達到拋磚引玉的效果，如果觀點有誤，還望各位看官輕噴。

如Kent C. Dodds Advanced React Component Patterns那樣，我們將使用一個相對簡單的<toggle></toggle>元件來說明這些模式。 <toggole></toggole>元件的職責是只是管理一個簡單的布林值狀態屬性: on。使用如此簡單的組件進行說明的目的，是因為我們可以將更多的注意力投入到相對組件本身而言較複雜的模式中。

經過這一系列文章，我將提供包含完整功能的、可運行的演示程式碼連結。你只需要將注意力集中到app資料夾和toggle資料夾。 toggle資料夾包含一些可重複使用的函式庫（一系列元件），當然這個函式庫會隨著文章的深入而改變。 app資料夾並且特別是app.component.html，將針對庫在不同的情況下的使用做出相應的改變。

我們將從最原始的toggle元件版本開始。它只是有一個使用了@Input()裝飾器的on屬性，這個屬性所控制的狀態代表元件本身的開關狀態，同時它還有一個是使用了@Output()裝飾器的toggle事件發射器，這個事件發射器會在元件開關狀態改變的情況下，通知父元件。

相關推薦：

在Angular元件中引入外部樣式的方法

兩種Angular彈出模式框的方式

AngularJS 教學及實例程式碼分析

#

以上是進階Angular 組件模式實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！