Angular 1.3 子組件的概述與引用

（1）概述。

         隨着應用程序的增長將所有功能保留在一個組件中將無法維護。您需要將大型組件拆分爲較小的子組件，每個子組件都專注於特定的任務或工作流程。

         子組件利於維護，它將整體模塊代碼拆分，使得代碼清晰利於理解，並且它還減少了耦合減少了代碼量，說白了就是將大的模塊進行拆分然後進行分裝。

（2）引用。

        我們還是基於前面的Angular 1.1 和 1.2 之後進行編寫。

        我們將1.2中的明細模塊提取出來，創建成獨立的子組件，可以多方調用。

        1.創建新組件hero-detail。

           運行命令：ng generate component hero-detail

          

        2.在hero-detail.component.ts中引用hero.ts，用於明細頁面的綁定與顯示。

          

          @Input 裝飾器使hero屬性可用於外部綁定。

        3.在hero-detail.component.html中綁定屬性hero,用於顯示數據。

         

       4.在heroes.component.html 頁面對子組件進行引用，並進行數據綁定。

        

         [hero]="selectedHero" 可以理解爲頁面傳值賦值。

       5.運行命令：ng serve --open,效果如下。