DDR爱好者之家

Angular2 组件间通过@Input @Output通讯示例
站长资源 2024/11/27 佚名
59 1538
DDR爱好者之家 Design By 杰米

本文介绍了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);
 }
}

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米