入門小白一隻，可能部分理解不到位，如有錯誤望請指正，謝謝~

輸入

資料通過輸入繫結流入元件，事件通過輸出繫結流出你的元件。
[]用來由父元件向子元件傳遞輸入。

父元件：

@component({
  selector:'par-component-name',
  template:`
  <child-component-name  ['1']="2">
  </child-component-name>
  `
})
class par-class-name{
  2;
}

子元件：（兩種方法）

方法一：

@component({
  selector:'child-component-name'
 
;
  inputs:['3:1']   //inputs:[鍵值對陣列]
})
class kid-class-name{
  3;
}

若3,1同名，即該輸入屬性的內外名字相同，則可簡化為如下，這也是常見情況：

@component({
  selector:'child-component-name';
  inputs:['1']   //inputs:[鍵值對陣列]
})
class kid-class-name{
  1;
}

鍵值對陣列中：
鍵：3,本元件控制器內的屬性名
值：1,出現在HTML標籤中，顯示外觀時的名字

方法二：

@component({
  selector:
 
'child-component-name';
})
class kid-class-name{
  @Input('1') 3;
}

若3,1同名，即該輸入屬性的內外名字相同，則可簡化為如下，這也是Angular風格指南建議的：

@component({
  selector:'child-component-name';
})
class kid-class-name{
  @Input() 3;
}

一個例項：

/**
*@InventoryApp 父元件
*/
@Component({
 selector:'inventory-app',
 template:`
  <div>
    <product-list
       [productList]="products"
 
>      //關鍵語句
    </product-list>
  </div>
 `
})
class InventoryApp{
  products:Product[];      //父元件宣告的屬性

  constructor(){
  this.products=[]
  }
}


/**
*@ProductList   子元件
*/
@Component({
 selector:'products-list',
 inputs:['productList'],     //第一種方法
 outputs:['onProductSelected'],  //輸出，下一部分有講解
 template:``

})
class ProductList{
  productList: Product[];  //子元件宣告的屬性
}

輸出

()用來由子元件向父元件傳遞輸出。再來重複一遍，資料通過輸入繫結流入元件，事件通過輸出繫結流出你的元件！！

情況一：輸出的事件為元件內建事件
核心語句：(output)=”action”

@component({
  selector:'child-component-name',
  template:`
    <button (click)="1()"> </button>
    //即(output)="action"，此處只是舉例output為點選按鈕，可以是任何內建事件的，比如表單裡許多控制元件都可以click，dbl-click,keydown,mousedown,mousemove等；action是本控制元件控制器內要實現的一個函式
  `

})
class kid-class-name{
  1(){
    //點選按鈕後要求執行的動作
  }
}

情況二：輸出的事件為自定義事件，來和元件外部通訊
其實就是使用了觸發事件的情況一，核心語句還是：(output)=”action”，不過這裡的output一般是子元件內宣告的一個EventEmitter物件，當它通過emit()方法釋出事件時，父元件內實現的action函式，用$event引數接收這個事件發出的內容，來執行action函式

如果之前沒有接觸過觀察者模式，可能有點難理解，可以去大概瞭解下概念就好了

父元件：

@component({
  selector:'par-component-name',
  template:`
  <child-component-name  (1)="2($event)">   //沒錯，還是(output)="action"
  </child-component-name>
  `
})
class par-class-name{
  2():{}    //一個函式，通常有一個引數，來接收EventEmitter發出的資料
}

子元件：

@component({
  selector:'child-component-name',
  outputs:['1'] ,            //陣列，可有多個輸出事件屬性
  template:`
    <button (click)="3()"> </button>
  `
})
class kid-class-name{
  1: EventEmitter<>;

  constructor(){
    this.1=new EventEmitter();
    //當把一個EventEmitter物件賦值給一個輸出時，Angular會自動幫我們訂閱事件
  }

  3(){                          //這裡就是情況一啦
  1.emit("要傳送的資料")；      //相當於是父元件的函式2訂閱了1這個EventEmitter物件，所以1發射的資料會被函式2的$event引數接收到
  }
}

來看一個情況二實際的小例子：

//父元件
@Component({
  selector:'club',
  template:`
    <div>
      <single-component
         (putRingOnIt)="ringWasPlaced($event)",>
      </single-component>
  `
})

class ClubComponent{
  ringWasPlaced(message:string){
    console.log(`Put your hands up: ${message}`);
    //`${message}` 叫做 字串插值，即顯示message的文字內容
  }
}

//子元件
@Compnent({
  selector:'single-component';
  outputs:[putRingOnIt];
  template:`
    <button (click)="likes()">Like it?</button>
   `
})

class SingleComponent{
  putRingOnIt:EventEmitter<string>;

  constructor(){
   this.putRingOnIt=new EventEmitter();
   }

   liked():void{
     this.putRingOnIt.emit("oh oh oh");
   }
}