Angular如何通过input模板引用获取值用于后端接口调用

问题根因 #

• 代码中'/person/id=id.value'属于被单引号包裹的静态字符串，Angular不会解析字符串内部的id.value变量，因此路径不会被替换为input的实际输入值。

解决方案 #

方案1：模板内直接拼接字符串 #

拆分固定路径和动态变量做拼接，直接修改按钮绑定逻辑即可：

<input type="text" #id/>
<button (click)="getPerson($event, '/person/id=' + id.value)">

方案2（更推荐）：拼接逻辑迁移到组件类 #

模板仅传递输入的id值，路径拼接逻辑放在组件ts代码中，可维护性更强：

1. 模板代码调整：

<input type="text" #id/>
<button (click)="getPerson($event, id.value)">

2. 组件类中修改getPerson方法：

getPerson(event: Event, idValue: string) {
  const requestUrl = `/person/id=${idValue}`;
  // 后续保留原有发起后端请求的逻辑即可
}

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