Angular项目中如何向URL拼接字符串？动态拼接不生效怎么解决？

你当前的实现方式不正确，主要存在两个问题：

• 模板字符串语法使用错误：ES6 中支持${变量}插值的模板字符串，必须使用反引号 ` 包裹，你当前的URL使用普通字符串格式时，${this.strAppend}会被识别为普通文本，不会解析为对应的变量值。
• 变量赋值时机错误：如果你将URL定义为类的直接初始化属性，类实例化时就会执行URL的赋值逻辑，此时getString方法还未调用，this.strAppend为undefined，后续你调用getString更新this.strAppend的值时，已经初始化完成的URL属性不会自动更新。

解决方法1：将URL定义为Getter动态计算 #

每次访问URL时，都会基于最新的this.strAppend生成地址，适配需要频繁修改strAppend的场景：

// 把之前固定的url属性改成getter
get url(): string {
  // 注意用反引号包裹，同时对拼接参数做URI编码避免特殊字符报错
  return `http://localhost:3000/document/id/${encodeURIComponent(this.strAppend)}/transaction?from=1610742245&to=1623439932`
}

解决方法2：更新strAppend时同步更新URL #

适合strAppend修改频率低的场景，每次调用getString时同步生成最新的URL：

// 类中定义两个属性
strAppend: string = '';
url: string = '';

getString(str: string){
  this.strAppend = str;
  // 同步更新URL，同样注意反引号和编码
  this.url = `http://localhost:3000/document/id/${encodeURIComponent(this.strAppend)}/transaction?from=1610742245&to=1623439932`
}

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