• Angular学习笔记之组件之间的交互


    1、@Input:可设置属性

         当它通过属性绑定的形式被绑定时,值会“流入”这个属性。

         在子组件中使用,例如:@Input()name:string

         父组件定义宾亮,并在父组件的模板中绑定,例如:

          子组件模板中:{{name}} 

          子组件控制器中:@Input()name:string

          父组件控制器中:username = "Lion"

          父组件模板中:[name] = "username" (在调用的子组件的选择器中绑定)

         此时,数据即从父组件传入子组件,子组件能在本身的模板中使用改“name”变量

    2、@Output:可观察对象型属性

         几乎总是返回Angular 的EventEmitter,当它通过事件绑定的形式被绑定时,值会“流出”这个属性

         在子组件中使用。例如:@Output() arriveMessage = new EventEmitter()

         子组件模板中绑定一个事件,例如按钮的点击事件(click()),在子组件控制器中定义一个被绑定到按钮点击事件的事件(message()),并在该事件中做出处理,即emit(弹射)例中的arriveMessage,在父组件的模板中绑定arriveMessage,绑定位置为子组件的选择器位置,最后 在父组件的控制器中进行事件处理(footerArriveMessage())

         例如:

         子组件模板:(click) = "message()"

         子组件控制器:@Output() arriveMessage = new EventEmitter()

                message(){

                  ..............

                  this.arriveMessage.emit();

                }

         父组件模板:(arriveMessage) = "footerArriveMessage()"

         父组件控制器中:footerArriveMessage(){

                  进行处理

                }

    3、子组件与子组件之间通过中间人模式实现通讯(需要有一个共同的父组件)

    4、子组件与子组件之间通过服务来实现组件之间的通讯(没有共同父组件)

    5、父组件与子组件通过本地变量互动

         在父组件的模板中使用,即在爱组件的选择器中声明一个本地变量(#变量名)例如:#name,该变量名即可代表子组件,之后可在父组件模板中调用子组件的属性和方法

         例如:

          (click) = "name.属性" 或 (click) = "name.方法"

         缺陷:

            父子组建的连接必须全部在父组件的模板中进行,在父组件的控制器中无法访问子组件的属性和方法

    6、父组件调用@ViewChild()

    总结

      @Input:在子组件中使用。数据从父组件传递到子组件

      @Output:在子组件中使用。子组件的元素事件(例如:点击事件)的处理函数发射出父组件的自定义事件,触发自定义事件,父组件执行函数处理该自定义事件。

      局部变量实现数据交互:在父组件中使用。父组件在局部模板中自定义一个局部变量,形如#····。通过局部变量访问子组件的公共变量和方法。局限是只能在局部模板中使用,不能在父组件的类中对子组件的相关变量和方法进行修改。

      @ViewChild:在父组件中使用。通过此方法实现的数据交互,可以对子组件的相关变量和方法进行修改。

         

  • 相关阅读:
    Android之基于XMPP即时通讯(转)
    开机启动service小DEMO
    Android 歌词同步滚动效果(转)
    OC中的消息传递和初始化
    oc中对象的初始化
    c语言的结构体字节数统计
    css的页面布局
    说一说我理解的css
    什么是js闭包
    我对js作用域的理解
  • 原文地址:https://www.cnblogs.com/huangfeihong/p/8891451.html
Copyright © 2020-2023  润新知