Angular新手求助：如何用Renderer2替代ElementRef实现输入值绑定

嘿，作为Angular新手，你找对方向了——官方确实不推荐直接用ElementRef操作DOM，不过你其实不需要用Renderer2来处理输入值的获取，Angular本身就有更贴合框架理念的方案，我来一步步帮你修正代码：

首先纠正模板里的两个小错误 #

你的当前模板里有两处不符合Angular语法的地方：

• Angular的事件绑定语法是(change)而不是(onchange)
• @input()不是获取输入值的正确方式，应该用$event.target.value来访问输入框的当前值

方法一：通过$event传递输入值 #

这是最直接的修改方式，不需要额外引入模块，只调整模板即可：

<!-- 修改后的 add-shipper.component.html -->
<section>
  <h2>Add Shipper</h2>
  <!-- 用(change)绑定事件，通过$event.target.value获取输入值 -->
  <input type="text" placeholder="Name" (change)="setShipperName($event.target.value)">
  <input type="text" placeholder="Email" (change)="setShipperEmail($event.target.value)">
  <button (click)="addShipper()">Submit</button>
</section>

你的add-shipper.component.ts代码不需要修改，setShipperName和setShipperEmail方法可以直接接收传递过来的字符串值，完美适配。

方法二：更推荐的双向绑定[(ngModel)] #

如果想让代码更简洁，Angular的双向绑定是更好的选择，它能自动同步视图和数据模型，省去手动写set方法的步骤：

1. 先导入FormsModule #

在你的模块文件（比如app.module.ts）中导入FormsModule，因为双向绑定依赖它：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule

import { AppComponent } from './app.component';
import { AddShipperComponent } from './add-shipper/add-shipper.component';

@NgModule({
  declarations: [
    AppComponent,
    AddShipperComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 添加到imports数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修改模板和组件代码 #

直接将输入框与shipper对象的属性绑定，不需要手动调用set方法：

<!-- 修改后的 add-shipper.component.html -->
<section>
  <h2>Add Shipper</h2>
  <!-- 双向绑定，自动同步shipper的name和email属性 -->
  <input type="text" placeholder="Name" [(ngModel)]="shipper.name">
  <input type="text" placeholder="Email" [(ngModel)]="shipper.email">
  <button (click)="addShipper()">Submit</button>
</section>

// 修改后的 add-shipper.component.ts
import { Component, OnInit } from '@angular/core';
import { Shipper } from 'src/app/modules/shipper';
import { ShipperService } from 'src/app/services/shipper.service';

@Component({
  selector: 'app-add-shipper',
  templateUrl: './add-shipper.component.html',
  styleUrls: ['./add-shipper.component.css']
})
export class AddShipperComponent implements OnInit {
  public shipper: Shipper;

  constructor(public shipperService: ShipperService) { }

  ngOnInit() {
    this.shipper = new Shipper();
  }

  public addShipper(): void {
    this.shipperService.addShipper(this.shipper).subscribe((addedShipper) => {
      this.shipper = addedShipper;
    });
  }

  // 这里可以去掉set方法，因为双向绑定已经自动更新shipper的属性
  // 如果你的Shipper类必须通过setName/setEmail来更新属性，可以保留set方法，然后在模板用单向绑定+change事件，或者在getter/setter里处理
}

为什么不需要用Renderer2？ #

Renderer2的主要作用是安全地操作DOM元素（比如修改样式、添加/删除元素、设置属性等），而获取用户输入这种场景，Angular的模板驱动表单或响应式表单已经提供了更优雅的解决方案，完全不需要直接接触DOM，这也符合官方推荐的“避免直接操作DOM”的最佳实践。

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