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

  • 相关阅读:
    pig实战 pig常用语法总结,教你快速入门——算法篇
    本科生码农应该会的6种基本排序算法(《数据结构与算法》)
    java 大块内存做数据缓存 大数据的高效收发
    一键安装zookeeper脚本制作篇 相关经验浅谈
    C语言第01次作业顺序、分支结构
    C语言 第三次作业函数
    hashmap笔记
    ArrayList排序与对象的序列化
    插入排序笔记(MIT算法导论课程)
    java解析四则运算表达式
  • 原文地址:https://www.cnblogs.com/aiyamoer/p/10794133.html
Copyright © 2011-2022 走看看