成都网站建设设计

将想法与焦点和您一起共享

Angular2如何实现组件交互

这篇文章主要为大家展示了“Angular2如何实现组件交互”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular2如何实现组件交互”这篇文章吧。

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的高明网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

前言

在Angular开发中,我们经常会涉及到组件之间的交互,比如会引用自己部门开发的组件
有时候,我们需要向引用的组件里面绑定一些数据,或者我们需要引用的子组件输出一些数据
这时,我们就需要处理好组件之间的交互

组件交互的关键代码

父组件绑定数据到子组件

子组件

{{hero.name}} says:

@Input() hero: Hero;

父组件


myhero = "Mr.IQ";

这里子组件的@Input表示它需要hero这个实体,之后父组件引入子组件的时候,就得在子组件标签内写入hero,同时在自己的组件内为hero赋值就实现了父组件数据绑定到子组件

父组件监听子组件的事件

子组件

Agree
@Output() onVoted = new EventEmitter();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

父组件


myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

子组件的@Output表示它会用onVoted方法向父组件传递一个boolean值,父组件引入子组件之后,通过把子组件的方法绑定到自己的方法上,就可以达到监听子组件的效果

setter截听输入属性值的变化

子组件

"{{name}}"

private _name = ''; @Input() set name(name: string) { this._name = (name && name.trim()) || ''; } get name(): string { return this._name; }

父组件

父组件引用子组件之后,向子组件绑定数据,子组件通过set,get对父组件传过来的数据进行修改显示

父组件与子组件通过本地变量互动

子组件

seconds = 11;
stop() { this.message = `Holding at T-${this.seconds} seconds`;  }

父组件

Stop
{{timer.seconds}}

子组件定义了变量和方法,父组件引用子组件标签之后,通过在标签建立本地变量来代表子组件,然后通过变量就可以实现访问子组件的变量和方法

以上是“Angular2如何实现组件交互”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站标题:Angular2如何实现组件交互
标题网址:http://chengdu.cdxwcx.cn/article/gsoeji.html

其他资讯