Angular提供了@Input和@Output語法來處理元件資料輸入和輸出。

@Input

Input輸入屬性，父元件向子元件傳遞資訊。

父元件HTML程式碼：

<div>
  這是父元件中輸入值：<br><br>{{inputTransmission}} 
</div>
<br>
<br>
<br>
<div>
  <app-soon [soonInput]="inputTransmission"></app-soon>
</div
 
>

父元件Component.ts程式碼：

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

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

  inputTransmission:string="這是父元件給子元件（input值）"
 
;

   constructor() { }

   ngOnInit() {
   }

}

子元件HTML程式碼：

<div>
  這是子元件中接收父元件中的輸入資訊：
</div>
<br>
<div>
  {{soonInput}}
</div>

子元件Component.ts程式碼：

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

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

  @Input()
  soonInput:string="這是子元件預設值";

  constructor() {

   }

  ngOnInit() {
  }

}

父元件中inputTransmission變數值可以傳遞給子元件。

@Output

Output輸出屬性，子元件向父元件傳遞資訊。Output不能向Input一樣將值直接傳遞，需要用EventEmitter發射到父元件中。

父元件HTML程式碼：

<div>
  這是父元件中輸出值：<br><br>{{outputTransmission}}
</div>
<br>
<br>
<br>
<div>
    <app-soon  (soonOutput)="receive($event)"></app-soon>
</div>

父元件Component.ts程式碼：

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

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

  outputTransmission:string="這是父元件中output值";  

   constructor() { }

   ngOnInit() {
   }

   receive(event){
    this.outputTransmission=event;
  }
}

子元件HTML程式碼：

<div>
  這是子元件中要給父元件中的值：
</div>
<br>
<div>
  {{soonOutput}}
</div>

子元件Component.ts程式碼：

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

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

  @Output()
  soonOutput:EventEmitter<string>=new EventEmitter();

  constructor() {   
   }

  ngOnInit() {
    this.soonOutput.emit("這是子元件給父元件的值output");
  }
}

子元件中soonOutput變數值可以傳遞給父元件。
子元件必須通過EventEmitter方法把值發射到父元件中，而且子元件發射的是事件，所以父元件接收時候是通過捕獲發射事件來得到值。

例項下載

https://download.csdn.net/download/h273979586/10333970