• 组件之间的事件绑定


    #组件之间的事件绑定
    应用场景: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

  • 相关阅读:
    2018/08/23 cstring中memset()函数的运用
    HDU 6446 Tree and Permutation(赛后补题)
    51NOD 1154 回文串的划分(DP)
    第七章小结_查找
    列出连通集的邻接表解题
    第六章学习小结_初识图
    图的邻接矩阵和邻接表及深度优先搜索
    第五章学习小结
    深深深深深深入虎穴
    括号匹配_进阶篇 ( 7-2 符号配对 )
  • 原文地址:https://www.cnblogs.com/aiyamoer/p/10794133.html
Copyright © 2020-2023  润新知