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,效果如下。