canvas（二） lineCap demo

　　Input与Output都是属性装饰器。

　　通常用于父子组件通信使用。

@Input

　　用来定义组件内的输入属性。

　　.d.ts 文件中定义如下：

export interface InputDecorator {
    (bindingPropertyName?: string): any;
    new (bindingPropertyName?: string): any;
}

　    由定义知道， 绑定的属性名是个可写参数。

　　 因此，我们可以这定义 Input。

　　（1）不带参数名

@Input() count: number =0

　　  在父组件使用时，传入的参数值如下：

<app-counter [count]="parentCount"></app-counter>

　　　此时，在父组件传入的参数名，默认就是 count。　　

　　（2）带参数名

@Input('inputValue')  count: number = 0

　　　在父组件使用时，传入的参数值如下：　

<app-counter [inputValue]="parentCount"></app-counter>

　　　　此时，在父组件传入的参数名，就是我们定义的属性名 inputValue。

　　（3） setter & getter

　　　相比 @Output,@Input多了这两个属性，可以用来约束属性的设置和获取。

　　   语法格式如下：

@Input()
set count() {
   //逻辑值处理
}

get count():T{
   // 逻辑处理后返回值
   return ...;
} 

　　　（4） ngOnchanges

　　　  当数据绑定输入值属性的值发生变化时，会触发 ngOnChanges()

　　　  语法如下：

ngOnChanges(changedEles : SimpleChange) {
   // changedEles['属性名']
}

　　　  SimpleChange 会有三个值：

previousValue: any;
currentValue: any;
firstChange: boolean;

　

@Output

　　 用来定义组件内的输出属性。

export interface OutputDecorator {
    (bindingPropertyName?: string): any;
    new (bindingPropertyName?: string): any;
}

　   当子组件的数据发生变化，需要通知父组件时，常常使用 EventEmitter。 使用方法：

　　1、子指令创建一个 EventEmitter 实例，作为输出属性导出。

@Output() changeCount : EventEmitter<any> = new EventEmitter<any>();

// 然后在某个时刻将信息发给父组件，一般在某个函数中
// 发送的信息可以是任何类型的
this.changeCount.emit(any)

　　2、父组件通过事件名称，获取子组件发过来的数据。

// 子组件事件名称 ="父组件函数名称($event)"
// 其中，$event 就是 子组件传送过来的数据
<app-counter [count]="initialCount" (changeCount)="parentChangeCount($event)"></app-counter>

　　@Input 与 @ Output综合代码如下：

子组件代码

　　使用 ng g c counter 命令生成组件代码。

counter.component.html

<p>当前值: {{ count }}</p>
<button (click)="increment()"> + </button>
<button (click)="decrement()"> - </button>

import { Component, OnInit , Input, OnChanges, SimpleChanges , Output , EventEmitter} from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss']
})
export class CounterComponent implements OnInit, OnChanges {
  @Output() changeCount: EventEmitter<any> = new EventEmitter<any>();
  constructor() { }

  ngOnInit() {
  }

  _count: number = 0;

  @Input()
  set count (num: number) {
      this._count = num;
  }

  get count(): number {
      return this._count;
  }

  increment() {
      this.count++;
  }

  decrement() {
      this.count--;
      this.changeCount.emit({
        count: this._count,
        fromChildFun: 'decrement'
      });
  }

  ngOnChanges(changedEles: SimpleChanges) {
    console.dir(changedEles['count']);
  }
}

父组件

<app-counter [count]="parentInitialCount" (changeCount)="parentChangeCount($event)"></app-counter>

parentInitialCount: number = 0;  

parentChangeCount($event) {
    console.dir($event);
  }