前言
我們知道angular元件間通訊有多種方法，其中最常用的一種方法就是藉助於 @Input 和 @Output 進行通訊。具體如何通訊請參考angular元件間通訊，本文不再贅述，我們來講講關於此方法如何進行單元測試。
建立假元件
我們單元測試父元件與子元件的的互動是否符合我們的要求，我們在父元件進行測試，就需要模擬一個假的子元件出來，這樣排除其他因素對測試的影響。
比如現在我在分頁元件裡寫了一個每頁大小選擇元件，現在要測試一下元件間互動。現在分頁元件就是我們的父元件，每頁大小元件就是我們的子元件。我們現在需要去模擬一個假的子元件出來。我們先模擬一個假模組出來。
我們的子元件在core模組裡，我們在core模組下創造一個core-testing模擬模組。再在core-testing模組下創造一個core元件，因為我們是一個模擬模組，我們只需要ts檔案即可。
@Component({ selector: 'app-size', template: `
size-select works!
`, styles: [] }) export class SizeComponent implements OnInit { constructor() { } ngOnInit() { } }
為了我們可以在父元件的測試檔案中得到模擬的子元件，我們還需要一個controller，在core-testing資料夾下建立一個core-testing-controller.ts檔案。CoreTestingController類繼承TestingController。
export class CoreTestingController extends TestingController { }
同時在我們的core-testing.module裡宣告CoreTestingController為提供者
providers: [ CoreTestingController ]
此時我們的目錄樹
core-testing git:(134) ✗ tree
.
├── core-testing-controller.ts
├── core-testing.module.ts
├── page
│ └── page.component.ts
└── size
└── size.component.ts
因為我們是模擬的子元件，所以我們應該新增子元件的@Input 和 @Output，同時在建構函式裡把這個模擬的子元件新增到CoreTestingController裡。
export class SizeComponent implements OnInit { @Input() size: number; @Output() onChangeSize = new EventEmitter
[limiyoyo ] angular元件間傳值測試的方法詳解已經有299次圍觀
