Angular 2 Output

头像
阿宝哥
    阅读 8 分钟
    19

    Angular 2 Output

    Output 是属性装饰器，用来定义组件内的输出属性。在 Angular 2 Input 文章中，我们介绍了 Input 装饰器的作用，也了解了当应用启动时，Angular 会从根组件开始启动，并解析整棵组件树，数据由上而下流下下一级子组件。而我们今天介绍的 Output 装饰器，是用来实现子组件将信息通过事件的形式通知到父级组件。具体如下图所示：

    图片描述

    在介绍 Output 属性装饰器前，我们先来介绍一下 EventEmitter 这个幕后英雄：

    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) 方法来触发一个事件，父指令通过事件绑定 (eventName) 的方式监听该事件，并通过 $event 对象来获取 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, 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('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() - outputs

    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>
    `,
    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, 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>父组件当前值：{{ initialCount }}</p> 
   <exe-counter [count]="initialCount" 
    (change)="initialCount = $event"></exe-counter>
  `
})
export class AppComponent {
  initialCount: number = 5;
}

    以上代码运行后浏览器显示的结果：

    图片描述

    接下来我们来介绍双向绑定，首先先看一下下图：

    图片描述

    双向绑定是由两个单向绑定组成：

    • 模型 -> 视图数据绑定

    • 视图 -> 模型事件绑定

    Angular 2 中 [] 实现了模型到视图的数据绑定，() 实现了视图到模型的事件绑定。两个结合在一起 [()] 就实现了双向绑定。也被称为 banana in the box 语法：

    图片描述

    [()] 语法示例

    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;

    // 输出属性名称变更： 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;
}

    从上面可以看出，[(modelName)] 可以拆分成两部分 modelName 和 modelNameChange ，[modelName] 用于绑定输入属性，(modelNameChange) 用于绑定输出属性。当 Angular 在解析模板时，遇到 [(modelName)] 形式的绑定语法，它会期待这个指令中会存在一个名为 modelName 的输入属性和一个名为 modelNameChange 的输出属性。

    ngModel

    使用过 Angular 1.x 的读者，应该很熟悉 ng-model 这个指令，我们通过它来实现数据的双向绑定。那么在 Angular 2 中有对应的指令么 ？答案是有滴，它就是 ngModel 指令。接下来我们来马上实战一下：

    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 = '';
}

    以上示例利用 @Directive 指令 metadata 信息中的 exportAs 属性，获取 ngModel 实例，进行获取控件的状态，控件状态分类如下：

    • valid - 表单值有效

    • pristine - 表单值未改变

    • dirty - 表单值已改变

    • touched - 表单已被访问过

    • untouched - 表单未被访问过

    我有话说

    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, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'exe-counter',
    outputs: ['change:countChange']
})
export class CounterComponent {
    @Output('countChange') change: EventEmitter<number> = new EventEmitter<number>();
}

    3.@Output vs outputs

    相同点：

    • 它们都是用来定义输出属性

    异同点：

    • outputs 定义在指令的 metadata 信息中，开发者对指令的输入属性一目了然。此外对于未选用 TypeScript 作为开发语言的开发者，也只能在 metadata 中定义指令的输入属性。

    • @Output 属于属性装饰器，通过它我们可以一起定义属性的访问描述符 (public、private、protected)：

    @Output('countChange') change: EventEmitter<number> = new EventEmitter<number>();

    4.输入、输出属性风格指南

    4.1 坚持使用 @Input 和 @Output ，而非 @Directive 和 @Component 装饰器的 inputs 和 outputs 属性：

    • 易于在类里面识别哪些属性是输入属性或输出属性。

    4.2 坚持把 @Input 或者 @Output 放到所装饰的属性的同一行：

    • 如果需要重命名与 @Input 或者 @Output 关联的属性或事件名，你可以在一个位置修改。

    4.3 避免为输入和输出属性指定别名

    • 同一个属性有两个名字（一个对内一个对外）很容易导致混淆。

    详细信息请参考 - Angular 2 风格指南 - STYLE 05-12

    5.父组件什么时候订阅子组件 EventEmitter 类型的输出属性 ？

    AppComponent/component.ngfactory.js

    图片描述

    CounterComponent/wrapper.ngfactory.js

    图片描述

    Microsoftangularjsangular2typescript
    阿宝哥
    15.8k 声望10.2k 粉丝

    聚焦全栈，专注分享 Angular、TypeScript、Node.js/Java 、Spring 技术栈等全栈干货

    « 上一篇
    Angular 2 Input
    下一篇 »
    RxJS Functional Programming

    引用和评论

    推荐阅读
    头像
    8.9W 播放量的 TS 动画版进阶教程合集来了！

    阿宝哥赞 36阅读 6.5k评论 2

    头像
    使用 AI 在医疗影像分析中的应用探索

    Swift社区赞 3阅读 1.1k

    头像
    解决lodash由于依赖错误导致无法启动的问题

    LYX6666赞 3阅读 4.4k

    头像
    angular 新语法糖学习一

    kexb赞 4阅读 209

    头像
    通过 AST 实现组件库替换升级

    linong赞 1阅读 2.6k

    头像
    一个由于前端缺少 encodeURIComponent 引起的登录问题的分析和解决

    注销赞 1阅读 1k

    头像
    Cocos-creator 实现简单触摸手势

    Evans_波阅读 5.5k

    0 条评论
    得票最新