Aangular 父子间组件传递

1.父子间组件传递------重点&难点

Vue.js和Angular中的父子间消息传递原理一样，都可以用口诀：

“Props Down，Events Up”

方向1：父 =>子

  父组件通过“子组件的自定义属性”向下传递数据给子组件

  1.Parent.ts:

         userName ='苍茫大地'

  2.Parent.html:

         <child2  [child2Name]='userName'></child2>

  3.Child2.ts

        @Input()           //声明为 "输入型属性"

         private  child2Name:string = null

   4.Child2.html

         <p>{{child2Name}}</p>

方向2：子 =>父

      子组件通过触发特定的事件(其中携带着数据),把数据传递给父组件(父组件提供事件处理方法)

   1.Child1.ts:自定义事件发射器 ------- 输出型属性

       @Output( )

        private   cryEvent  =new EventEmitter()

    2.Child1.ts:在某个时刻发射事件

       this.cryEvent.emit( 子组件向传给父组件的数据 )

-----------------------------------------------------------------

    3.Parent.html:监听子组件的事件

       <child1  (cryEvent)="doCry($event)"></child1>

    4.Parent.ts:接收子组件传递的数据

        doCry( e ){   e就是子组件传递过来的数据   }