---
title: "父子组件传参"
date: "2026-04"
category: "Angular"
tags: ["Angular"]
description: "angular确实是把订阅者-接收者贯彻始终，包括子传父在内也是利用了Observable的机制，子层发布一个事件，而父层则订阅这个事件，等待其触发后来执行相应的回调..."
source: "https://enriquemark.com/zh-hans/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`是一种坏味道——除非真有什么极端场景，要求其必须自定义一个，否则正常情况下就不该用。