Angular如何实现子组件textarea输入文本与父组件绑定

完全可以实现，Angular原生的父子组件通信能力就能覆盖这个场景。额外提醒：Angular模板中绑定点击事件不要用原生onclick属性，要使用框架提供的(click)事件绑定语法，否则事件不会纳入Angular变更检测流程，容易出现取值不更新的问题。

下面给两种可直接落地的实现方式，可根据业务场景选择：

这种方式解耦性最好，子组件只负责在输入变化时把值抛给父组件，父组件自行存储和使用值，适合大多数业务场景。

• 子组件侧逻辑：引入Output和EventEmitter，监听textarea的输入事件，每次输入变化时把最新值发射到父组件

  // child.component.ts
  import { Component, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-child',
    template: `<textarea placeholder="请输入内容" (input)="handleInput($event)"></textarea>`
  })
  export class ChildComponent {
    @Output() textUpdate = new EventEmitter<string>();
  
    handleInput(e: Event) {
      const inputVal = (e.target as HTMLTextAreaElement).value;
      this.textUpdate.emit(inputVal);
    }
  }
  

• 父组件侧逻辑：绑定子组件发射的事件，把接收到的值存在自身属性中，点击按钮时直接读取该属性即可

  // parent.component.ts
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-parent',
    template: `
      <app-child (textUpdate)="childText = $event"></app-child>
      <button (click)="getChildText()">获取输入内容</button>
    `
  })
  export class ParentComponent {
    childText = '';
  
    getChildText() {
      // 此处即可拿到子组件textarea的最新输入值
      console.log('输入内容：', this.childText);
      // 后续业务逻辑直接在此编写
    }
  }
  

如果逻辑简单不需要实时同步值，可以直接在父组件模板中给子组件加本地引用，点击按钮时直接访问子组件暴露的属性取值，代码量更少。

• 子组件侧逻辑：把textarea的输入值绑定到自身公共属性上，供父组件访问

  // child.component.ts
  import { Component } from '@angular/core';
  import { FormsModule } from '@angular/forms'; // 记得在所属模块导入FormsModule才能用ngModel
  
  @Component({
    selector: 'app-child',
    standalone: true,
    imports: [FormsModule],
    template: `<textarea placeholder="请输入内容" [(ngModel)]="textValue"></textarea>`
  })
  export class ChildComponent {
    textValue = ''; // 必须声明为public，父组件模板才能访问
  }
  

• 父组件侧逻辑：给子组件添加模板引用变量，点击按钮时直接读取子组件的属性值

  <!-- parent.component.html -->
  <app-child #childRef></app-child>
  <button (click)="console.log(childRef.textValue)">获取输入内容</button>
  

注意：方案2虽然写法简便，但父组件会直接耦合子组件的内部属性，若后续子组件重构修改属性名，父组件逻辑会直接报错，复杂业务场景优先选择方案1。

内容的提问来源于stack exchange，提问作者domekker