【Angular2】组件交互
来源:互联网 发布:mysql查询分析器下载 编辑:程序博客网 时间:2024/06/05 05:18
前言
在Angular开发中,我们经常会涉及到组件之间的交互,比如会引用自己部门开发的组件
有时候,我们需要向引用的组件里面绑定一些数据,或者我们需要引用的子组件输出一些数据
这时,我们就需要处理好组件之间的交互
组件交互的关键代码
父组件绑定数据到子组件
子组件
<h3>{{hero.name}} says:</h3> @Input() hero: Hero;
父组件
<hero-child [hero]="myhero" ></hero-child>myhero = “Mr.IQ”;
这里子组件的@Input表示它需要hero这个实体,之后父组件引入子组件的时候,就得在子组件标签内写入hero,同时在自己的组件内为hero赋值就实现了父组件数据绑定到子组件
父组件监听子组件的事件
子组件
<button (click)="vote(true)" >Agree</button>@Output() onVoted = new EventEmitter<boolean>();vote(agreed: boolean) { this.onVoted.emit(agreed);}
父组件
<my-voter (myonVoted)="onVoted($event)"></my-voter>myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }
子组件的@Output表示它会用onVoted方法向父组件传递一个boolean值,父组件引入子组件之后,通过把子组件的方法绑定到自己的方法上,就可以达到监听子组件的效果
setter截听输入属性值的变化
子组件
<h3>"{{name}}"</h3>private _name = '';@Input()set name(name: string) { this._name = (name && name.trim()) || '<no name set>'; }get name(): string { return this._name; }
父组件
<name-child [name]="myname"></name-child>
父组件引用子组件之后,向子组件绑定数据,子组件通过set,get对父组件传过来的数据进行修改显示
父组件与子组件通过本地变量互动
子组件
seconds = 11;stop() { this.message = `Holding at T-${this.seconds} seconds`; }
父组件
<button (click)="timer.stop()">Stop</button><div class="seconds">{{timer.seconds}}</div><countdown-timer #timer></countdown-timer>
子组件定义了变量和方法,父组件引用子组件标签之后,通过在标签建立本地变量来代表子组件,然后通过变量就可以实现访问子组件的变量和方法
小结
组件交互是经常用到的知识,需要熟练掌握
还有其它交互方式,比如生命周期、服务,遇到了可以继续深入研究
阅读全文
0 0
- 【Angular2】组件交互
- 【Angular2】组件交互异步问题
- Angular2之组件交互和数据绑定
- Angular2组件与Echarts饼状图交互之饼图制作
- Angular2组件与Echarts饼状图交互之添加点击事件
- angular2 组件
- angular2 组件
- angular2 倒计时组件
- Angular2 倒计时组件
- Angular2自定义分页组件
- Angular2核心组件@Component
- angular2之组件通讯
- 【Angular2】理解组件
- Angular2--组件生命周期
- angular2学习 之 组件
- Angular2核心组件@Component
- Angular2核心组件@Component
- 【Angular2】OnlineExam组件设计
- C# Func<参数列表>
- 关于lucene/solr的相关知识点
- nlp的相关资源文档,nltk,pynlp,nlpir,gensim
- 安装Paramiko模块
- INI文件读写
- 【Angular2】组件交互
- const实现的机制
- mapreduce内存溢出,导致Killing container问题
- 最大值减去最小值小于或等于num的子数组数量
- poj 2533 Longest Ordered Subsequence (最长递增子序列)
- TCP/IP协议
- 雷鸣的游戏人生(一) --- 三个笑话
- 获取验证码 HTTP Status 500
- 第48篇 字符编码探密--ASCII,UTF8,GBK,Unicode