zoukankan      html  css  js  c++  java
  • 组件之间的事件绑定

    #组件之间的事件绑定
    应用场景:parent component内嵌了一个child component,child的template 有一个button,点击这个button,把child的数据传递给parent component

    数据流向:从child -> parent
    用到的知识点:output、EventEmitter(事件发射器)

    实现思路:
    1.构建child组件的事件绑定
    2.构建parent组建的事件绑定
    3.parent与child关联

    知识点:设计中的观察者模式,Eventemitter是一个实现了观察者模式的对象,他管理一系列的订阅者(subscribe),并向其发布事件的对象。
    观察者设计模式:举例来说server返回的数据放在了一个地方,只有去取才能拿到。
    举例场景:
    报 刊 中 心(分发中心)
    | |
    订阅者(subscribe),订阅者(subscribe)

    只有订阅了,才能得到报刊的信息

    有的框架在用到观察者模式时,非常明确,有一个observe center
    angular没有oberver ,但是有明确的subscribe
    subscribe本身是一个方法,用于订阅变化的信息。

    注意事项:
    这里所说的Output是指child component的输出
    @Input、@Output 都是以child component为参考物
    @Input、@Output 都定义在child component中
    以我看来,这种模式更像是delegate模式(委托模式)
    child 发起一个task,触发了事件,但child不执行这个事件;那么谁来执行这个事件呢?
    或者说,委托谁来处理这个事件呢?Angular中,由parent来处理这个事件

    特别注意事项:
    parent与child的@Output、@Input之间的关系是“固定的”,名称必须一致。
    parent中的(output name)的output name 必须是child中所定义的那个@Output、@Input

    补充:回调函数中,参数的命名不重要,参数的位置是唯一的
    如果一个函数的callback函数,可以简单地命名函数的参数为:(cb),cb callback的缩写


    总结:自顶向下的数据流:简单;
    而逆向的数据流,有些复杂,必须通过EventEmitter实现。
     
    app.component.html

    parent.component.html

    child.component.html

    child.component.ts

    parent.component.ts

  • 相关阅读:
    (转)Java 调用 C++ (Java 调用 dll)
    用Gvim建立IDE编程环境 (Windows篇)
    (转)python调取C/C++的dll生成方法
    C/C++协程的实现方式总结
    时钟周期,机器周期,指令周期,总线周期
    (转)MongoDB和Redis区别
    linux cpu占用100%排查
    (转)linux 打开文件数 too many open files 解决方法
    Python下载网页图片
    python抓网页数据【ref:http://www.1point3acres.com/bbs/thread-83337-1-1.html】
  • 原文地址:https://www.cnblogs.com/aiyamoer/p/10794133.html
Copyright © 2011-2022 走看看