欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular2 组件间通过@Input @Output通讯示例

程序员文章站 2022-07-06 21:20:17
本文介绍了angular2 组件间通过@input @output通讯示例,分享给大家,具体如下: 父组件传给子组件: 子组件设置@input属性,父组件即可通过设...

本文介绍了angular2 组件间通过@input @output通讯示例,分享给大家,具体如下:

父组件传给子组件:

子组件设置@input属性,父组件即可通过设置html属性给子组件传值。

子组件:

 @input() title:string;
 _name:string = '';

 @input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }

上面的代码设置了两个可供父组件传入的属性:title和name,当设置name属性时,set name(name:string)方法会执行,如果不需要处理setter,那么用title的形式,一行代码声明即可.

父组件调用:

<app-header [title]="title" name="姓名"></app-header>

调用方法有两种,属性名用中括号包围的title,值title是父组件中的对象名,而name没有用中括号,后面的值就是传给子组件的字符串。当然,不用中括号,也可以用{{name}}传对象的值。

如果要监听传入属性值的变化,可以在子组件实现onchanges(@angular/core中)接口:

export class headercomponent implements onchanges {
 ngonchanges(changes: simplechanges): void {
  console.log(changes['title']);
 }
 @input() title:string;
 _name:string = '';

 @input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }

}

simplechanges 是一个用属性名作key的数组,通过属性名取出对象,对象里包含该属性变化前(previousvalue)后(currentvalue)的值。

父组件监听子组件变化

子组件通过@output()暴露eventemitter,父组件在声明子组件时增加eventemitter的回调方法,子组件在需要的时候弹射事件,父组件的回调方法里就能收到。

子组件:

export class headercomponent implements onchanges {
 ngonchanges(changes: simplechanges): void {
  console.log(changes['title']);
 }
 @input() title:string;
 _name:string = '';

 @input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }
 //声明事件发射器
 @output() checkemitter=new eventemitter<boolean>();
 //用于绑定checkbox的checked属性
 ischecked=true;

 toggle() {
  this.ischecked=!this.ischecked;
  //发射事件
  this.checkemitter.emit(this.ischecked);
 }
}

子组件模板:

<p>
 {{title}}
</p>
<p><input type="checkbox" name="cb" [(ngmodel)]="ischecked" (click)="toggle()" />checkbox <br /></p>

父组件中声明:

复制代码 代码如下:

<app-header [title]="title" name="{{name}}" (checkemitter)="oncheckedchange($event)" ></app-header>

父组件事件回调接收:

export class appcomponent implements afterviewinit{
 ngafterviewinit() {

 }
 oncheckedchange(ischecked:boolean) {
  console.log("checkbox选中状态:"+ischecked);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。