Angular学习06

父子组件通讯

举个例子：购物软件

        首页组件

        新闻组件

        商品组件

                点击商品，弹出子组件（购物车组件），并对子组件的数据进行更新

        购物车组件

父组件给子组件传 值-     @Input

        ！！不仅可以给子组件传递简单的数据，还可以把自己的方法以及整个父组件传给子组件

        子组件可以获取父组件的数据

                ① 父组件调用子组件的时候传入数据

                        <app-header [msg]="msg"></app-header>

                ② 子组件引入input模块

                        

                ③ 子组件中 @Input接收父组件传过来的数据

                        

        子组件可以获取父组件的方法

               实现原理同上，不过上述的，msg是个方法

                然后子组件在ts文件中获得了这个方法，就可以使用了

        子组件可以获取整个父组件

                  <app-header [home]="this"></app-header>    //父组件在调用子组件的时候 传入的参数是this，也就是指向自己本身

                

子组件给父组件传 值--  @ViewChild

        父组件可以获取子组件的数据

                ① 调用子组件给子组件定义一个名称,这样的话相当于获得了整个子组件

                        <app-footer #footerChild></app-footer>

                ② 父组件引入ViewChild模块

                        

                 ③ 在父组件的类中利用 @ViewChild('footer') footer:any;   来获得子组件

                ④ 然后就可以在相应的方法中  通过this.footer.msg来获得子组件的数据

        父组件可以获取子组件的方法

子组件通过@Output触发父组件的方法----了解

组件之间通讯----用的比较多的是localStorage和服务

非父子组件

        组件之间传 值

        共享方法