---
title: "父子元件傳參"
date: "2026-04"
category: "Angular"
tags: ["Angular"]
description: "angular確實是把訂閱者-接收者貫徹始終，包括子傳父在內也是利用了Observable的機制，子層發布一個事件，而父層則訂閲這個事件，等待其觸發後來執行相應的回調..."
source: "https://enriquemark.com/zh-hant/posts/%E7%88%B6%E5%AD%90%E7%B5%84%E4%BB%B6%E5%82%B3%E5%8F%83"
---

angular確實是把訂閱者-接收者貫徹始終，包括子傳父在內也是利用了`Observable`的機制，子層發布一個事件，而父層則訂閲這個事件，等待其觸發後來執行相應的回調。

比如下面這個操作，子層確立了一個`Output`，對外發布了一個事件。`this.commit.emit(val)`就是觸發事件的操作，向訂閱者返回需要執行回調的訊號，而`val`就是`$event`回傳的內容，在new的時候用\<T>定義。

```typescript
@Component({ selector: 'app-child', ... })
export class ChildComponent {
  @Input() value = '';        // 接收父層狀態
  @Output() commit = new EventEmitter<string>();  // 定義回調出口

  onInput(event: Event) {
    const val = (event.target as HTMLInputElement).value;
    this.commit.emit(val);    // 觸發回調，把新值傳給父層
  }
}
```

下面的父層用\[v] 來定義子層的 `Input` ，()則是訂閲子層發布的事件，其內容當然就是該事件觸發時的回調。

```html
<app-child
  [value]="form.get('username')?.value"
  (commit)="form.get('username')?.setValue($event)">
</app-child>
```

這個地方的`Output`其實只要求是`Observable`就好，沒有一定要求用`EventEmitter`，但那不是推薦寫法。既然官方已經推薦最好就用事件，那為了防止意料之外的事情出現，走標準做法是最好的。可以説，發現這個地方用了莫名其妙的自定義`Observable`是一種壞味道——除非真有什麼極端場景，要求其必須自定義一個，否則正常情況下就不該用。