专栏首页Jerry的SAP技术分享Angular父子Component之间的事件通知机制

Angular父子Component之间的事件通知机制

例子:product-list为parent Component,product-alert为child Component.

(1) child Component里必需的开发

从@angular/core里导入Input, Output和EventEmitter:

新建一个名为product的属性,用于从parent Component里接收当前选中的product.

新建一个EventEmitter实例,用于向parent Component发送事件。

在product alert模板里,给按钮点击click事件附上处理函数:notify.emit()

<p *ngIf="product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>

(2) parent Component里必需的开发

使用语法中括号[]给child Component的Input属性赋值,使用语法大括号{}给child Component的Output属性赋值:

onNotify的实现,位于parent Component ts文件内:

最后的效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何使用Angular的@Input()装饰器

    (2) 在需要使用@Input的Component内,声明一个product属性(property): @Input() product;

    Jerry Wang
  • Angular路由开发的一个实际例子

    在NgModule文件app.module.ts里,找到RouterModule.forRoot, 新增一条路由信息:

    Jerry Wang
  • SAP CRM settype COMM_PROD_VAR

    This model defines a series of attributes which allows customer to specify by th...

    Jerry Wang
  • 04-树5 Root of AVL Tree (25分)

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights ...

    AI那点小事
  • 生物识别ATM受印度银行业欢迎

    印度卡纳塔克邦首府班加罗尔出现了首台生物识别ATM机,该系统采用的是指纹识别技术,使用者无需再进行银行卡与PIN码身份验证。 该系统是在另外一个程序的基础上的扩...

    人工智能快报
  • IComMediator模块化解耦

    程序员不务正业
  • Thymeleaf一篇就够了

    大家好,我是bigsai,今天我们来学习Thymeleaf,如果你对Thymeleaf比较陌生也不要紧,它很容易学习与理解,并有着自己鲜明的特色。

    bigsai
  • Python collections.defaultdict模块用法详解

    Python中通过Key访问字典,当Key不存在时,会引发‘KeyError’异常。为了避免这种情况的发生,可以使用collections类中的defaultd...

    砸漏
  • Pandas-16.聚合

    悠扬前奏
  • 如何利用分层测试概念设计针对性测试用例

    除了纯后台测试或者纯接口测试外,我想大部分人都会接触业务测试,至少我们目前的客户端产品测试就是这样。

    sylan215

扫码关注云+社区

领取腾讯云代金券