AngularJs学习笔记-组件间通讯
2024-10-08 13:17:01
组件间通讯
(1)输入属性@Input
Tips:子组件属性的改变不会影响到父组件
如下,子组件中stockCode属性发生变化不会引起父组件stock属性的变化
(2)输入属性@Output
子组件tsimport { Component, OnInit, Output } from '@angular/core';
import { EventEmitter } from '@angular/core'; const STOCK_CODE = "IBM"; @Component({
selector: 'app-price-quote-inner',
templateUrl: './price-quote-inner.component.html',
styleUrls: ['./price-quote-inner.component.css']
})
export class PriceQuoteInnerComponent implements OnInit {
price: number = 0;
//在子组件的控制器中定义了EventEmitter属性,并为该属性添加@Output装饰器
//EventEmitter能够向外部组件发送信息,即触发外部组件的一个事件,外部组件可以监听该事件,@Output中的内容表示事件的名称
@Output("priceChange")
lastPrice: EventEmitter<PriceQuote> = new EventEmitter<PriceQuote>(); constructor() { } ngOnInit() {
//每个1秒钟改变1次价格,并向外部发送该价格信息
//这里向外部发送了一个PriceQuote类型的变量
setInterval(() => {
const price = Math.random() * 10;
this.price = price;
this.lastPrice.emit(new PriceQuote(STOCK_CODE, price));
}, 1000);
} } export class PriceQuote {
constructor(public stockCode: string,
public price: number) {};
}
父组件ts
import { Component, OnInit } from '@angular/core';
import { PriceQuote } from '../price-quote-inner/price-quote-inner.component'; @Component({
selector: 'app-price-quote-outer',
templateUrl: './price-quote-outer.component.html',
styleUrls: ['./price-quote-outer.component.css']
})
export class PriceQuoteOuterComponent implements OnInit {
price: number = 0; constructor() { } ngOnInit() {
}
//监听子组件发送信息的方法
//传入的参数event即为子组件发送的内容
priceChangeHandler(event: PriceQuote) {
this.price = event.price;
} }
父组件HTML
<!-- 监听通过在子组件中定义好的事件名称priceChange,通过priceChangeHandler处理事件的内容 -->
<app-price-quote-inner (priceChange)="priceChangeHandler($event)"></app-price-quote-inner>
<p>
Parent component: current priceQuote is {{price | number:"1.2-2"}}
</p>
效果如下
(3)中间人模式
中间人模式是一种设计模式,用于解耦组件间的通讯,可以通过父组件可service等方式对多个组件间的通讯进行解耦
当统一个父组件中的两个子组件需要进行通讯时,可以通过父组件监听发送方子组件发送的消息并把消息传递给接收方子组件的方式对两个子组件进行解耦。此时两个子组件都可以不需要知道彼此的存在,提高组件间的可重用性。
(4)父组件既可向子组件传递数据,也可调用子组件的api
1、在模板中调用
2、在控制器中调用
最新文章
- 【原】移动web页面使用字体的思考
- jsonp
- JDBC数据库连接池技术
- 不要怂,就是GAN (生成式对抗网络) (一)
- struts 标签<;s:ierator>;的简单使用说明
- jdbc基础 (一) MySQL的简单使用
- Keepalived 安装与配置
- hbase1.1.2安装
- SqlDBHelper常用方法
- HDU 5618 Jam&#39;s problem again CDQ分治 BC ROUND 70
- java随机数生成(固定位数)
- 2个NASM开发环境下载以及30篇教程(lostspeed)
- Routing 服务
- Python读取和处理文件后缀为";.sqlite";的数据文件
- H5+混合移动app应用开发——开篇
- JavaScript八张思维导图
- 201621123068 Week04-面向对象设计与继承
- Log4j分级别存储日志到数据库
- ANOVA-方差分析和单尾方差分析
- zabbix和iptables的nat表结合使用
热门文章
- 解读人:范徉,Methylome and Metabolome Analyses Reveal Adaptive Mechanisms in Geobacter sulfurreducens Grown on Different Terminal Electron Acceptors(甲基化组学和代谢组学分析发现Geobacter sulfurreducens生长在不同电子终受体中的适应机制)
- 使用Collectd + InfluxDB + Grafana进行JMX监控
- nagios客户端之nrpe3.2.1安装(Ubuntu)
- Python读取PDF文档
- BZOJ1816(二分)
- java——方法重载与重写、构造方法、this关键字、static关键字、strictfp关键字、类的导入
- Eclipse与异常处理
- map 常用方法
- 27 个Jupyter Notebook的小提示与技巧
- IE浏览器与非IE浏览器JS日期兼容性问题处理