Angular 2 Output
Angular 2 OutputOutput 是属性装饰器,用来定义组件内的输出属性。在 Angular 2 Input 文章中,我们介绍了 Input 装饰器的作用,也了解了当应用启动时,Angular 会从根组件开始启动,并解析整棵组件树,数据由上而下流下下一级子组件。而我们今天介绍的 Output 装饰器,是用来实现子组件将信息通过事件的形式通知到父级组件。具体如下图所示:
在介绍 Output 属性装饰器前,我们先来介绍一下 EventEmitter 用来触发自定义事件,具体使用示例如下: let numberEmitter: EventEmitter<number> = new EventEmitter<number>(); numberEmitter.subscribe((value: number) => console.log(value)); numberEmitter.emit(10); 在 Angular 2 中的 EventEmitter 应用场景是:子指令创建一个 EventEmitter 实例,并将其作为输出属性导出。子指令调用已创建的 EventEmitter 实例中的 emit(payload) 方法来触发一个事件,父指令通过事件绑定 @Output()counter.component.ts import { Component,Input,Output,EventEmitter } from '@angular/core'; @Component({ selector: 'exe-counter',template: ` <p>当前值: {{ count }}</p> <button (click)="increment()"> + </button> <button (click)="decrement()"> - </button> ` }) export class CounterComponent { @Input() count: number = 0; @Output() change: EventEmitter<number> = new EventEmitter<number>(); increment() { this.count++; this.change.emit(this.count); } decrement() { this.count--; this.change.emit(this.count); } } app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'exe-app',template: ` <p>{{changeMsg}}</p> <exe-counter [count]="initialCount" (change)="countChange($event)"></exe-counter> ` }) export class AppComponent { initialCount: number = 5; changeMsg: string; countChange(event: number) { this.changeMsg = `子组件change事件已触发,当前值是: ${event}`; } } 以上代码运行后浏览器显示的结果:
@Output('bindingPropertyName')Output 装饰器支持一个可选的参数,用来指定组件绑定属性的名称。如果没有指定,则默认使用 @Output 装饰器,装饰的属性名。具体示例如下: counter.component.ts import { Component,template: ` <p>当前值: {{ count }}</p> <button (click)="increment()"> + </button> <button (click)="decrement()"> - </button> ` }) export class CounterComponent { @Input() count: number = 0; @Output('countChange') change: EventEmitter<number> = new EventEmitter<number>(); ... // 其余代码未改变 } app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'exe-app',template: ` <p>{{changeMsg}}</p> <exe-counter [count]="initialCount" (countChange)="countChange($event)"></exe-counter> ` }) export class AppComponent { initialCount: number = 5; changeMsg: string; countChange(event: number) { this.changeMsg = `子组件change事件已触发,当前值是: ${event}`; } } @Component() - outputscounter.component.ts import { Component,template: ` <p>当前值: {{ count }}</p> <button (click)="increment()"> + </button> <button (click)="decrement()"> - </button> `,outputs: ['change:countChange'] }) export class CounterComponent { @Input() count: number = 0; change: EventEmitter<number> = new EventEmitter<number>(); increment() { this.count++; this.change.emit(this.count); } decrement() { this.count--; this.change.emit(this.count); } } Two-Way Data Binding在介绍双向绑定之前,我们先来说个需求:即在 CounterComponent 子组件 count 值发生变化的时候,需同步更新 AppComponent 父组件中的 initialCount 的值。通过上面的实例,我们知道我们可以在 AppComponent 父组件中监听 CounterComponent 子组件的 change 事件,然后在 change 事件中更新 initialCount 的值。具体示例如下: counter.component.ts import { Component,template: ` <p>子组件当前值: {{ count }}</p> <button (click)="increment()"> + </button> <button (click)="decrement()"> - </button> ` }) export class CounterComponent { @Input() count: number = 0; @Output() change: EventEmitter<number> = new EventEmitter<number>(); increment() { this.count++; this.change.emit(this.count); } decrement() { this.count--; this.change.emit(this.count); } } app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'exe-app',template: ` <p>父组件当前值:{{ initialCount }}</p> <exe-counter [count]="initialCount" (change)="initialCount = $event"></exe-counter> ` }) export class AppComponent { initialCount: number = 5; } 以上代码运行后浏览器显示的结果:
接下来我们来介绍双向绑定,首先先看一下下图:
双向绑定是由两个单向绑定组成:
Angular 2 中
[()] 语法示例counter.component.ts import { Component,template: ` <p>子组件当前值: {{ count }}</p> <button (click)="increment()"> + </button> <button (click)="decrement()"> - </button> ` }) export class CounterComponent { @Input() count: number = 0; // 输出属性名称变更: change -> countChange @Output() countChange: EventEmitter<number> = new EventEmitter<number>(); ... // 其余代码未改变 } app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'exe-app',template: ` <p>父组件当前值:{{ initialCount }}</p> <exe-counter [(count)]="initialCount"></exe-counter> ` }) export class AppComponent { initialCount: number = 5; } 从上面可以看出, ngModel使用过 Angular 1.x 的读者,应该很熟悉 ngModel双向绑定示例 import { Component } from '@angular/core'; @Component({ selector: 'exe-app',template: ` <p>你输入的用户名是:{{ username }}</p> <input type="text" [(ngModel)]="username" /> ` }) export class AppComponent { username: string = ''; } ngModel表单验证示例 import { Component } from '@angular/core'; @Component({ selector: 'exe-app',styles:[ `.error { border: 1px solid red;}` ],template: ` <p>你输入的用户名是:{{ username }}</p> <input type="text" [(ngModel)]="username" #nameModel="ngModel" [ngClass]="{error: nameModel.invalid}" required/> {{nameModel.errors | json}} ` }) export class AppComponent { username: string = ''; } 以上示例利用
我有话说1.ngModel指令定义 @Directive({ selector: '[ngModel]:not([formControlName]):not([formControl])',providers: [formControlBinding],exportAs: 'ngModel' }) export class NgModel extends NgControl implements OnChanges,OnDestroy { ... } 2.不能同时使用 @Output 装饰器 或在 @Directive、@Component outputs 字段中定义同一个输入属性,具体示例如下: import { Component,outputs: ['change:countChange'] }) export class CounterComponent { @Output('countChange') change: EventEmitter<number> = new EventEmitter<number>(); } 3.@Output vs outputs 相同点:
异同点:
@Output('countChange') change: EventEmitter<number> = new EventEmitter<number>(); 4.输入、输出属性风格指南 4.1 坚持使用 @Input 和 @Output ,而非 @Directive 和 @Component 装饰器的 inputs 和 outputs 属性:
4.2 坚持把 @Input 或者 @Output 放到所装饰的属性的同一行:
4.3 避免为输入和输出属性指定别名
详细信息请参考 - Angular 2 风格指南 - STYLE 05-12 5.父组件什么时候订阅子组件 AppComponent/component.ngfactory.js
CounterComponent/wrapper.ngfactory.js
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |