app.component.html:

<table>
<tr><td [attr.colspan] = "size">测试table的属性绑定</td></tr>
</table>

<app-child #my test= "{{myNumber}}" (testChange)="childChange(my.test)"></app-child>//这里定义了一个变量，并且订阅了事件和传入了参数
<button (click) = "myNumber = myNumber + 1">adas</button>

app.component.ts:

import { Component , OnInit} from '@angular/core';
// tslint:disable-next-line:import-blacklist
import { Observable } from 'rxjs';
import { ChildComponent } from './child/child.component';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
size = 3;
myNumber = 0;

constructor() {
Observable.from([1, 2, 3, 4]).filter(e => e % 2 === 0)
.map(e => e * e)
.subscribe( e => console.log(e));
}

ngOnInit() {}

childChange(data: number): void {
alert(data);
this.myNumber = data;
}
}

child.component.html:

<p>
child works!{{test}}//这里是可以直接使用test的，代码里有此属性
</p>

<button (click) = "mytest()">my</button>

child.component.ts:

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

@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

private _test: number;

@Input()
public set test(data: number){//做成属性的方式
if ( this._test !== +data ) {//注意，传入的可能是字符串，所以要变成数字来参与计算，不然可能不是自己想要的结果
this._test = +data;//这里同理
this.testChange.emit(this._test);//发出一个事件
}
}

public get test(): number//get属性
{
return this._test;
}

@Output()
public testChange: EventEmitter<number> = new EventEmitter();//定义一个事件

constructor() { }
ngOnInit() {
}

mytest(): void {
this.test = this.test + 1;
}
}