Angular带查询参数外部链接问题：点击地址无法正确跳转谷歌地图

云原生阿岚

2026-7-10

Angular点击地址打开谷歌地图参数异常问题解决

问题原因

你在TS文件的openExternalUrl方法中错误使用了Angular模板的插值语法{{}}——这种语法仅在Angular HTML模板中生效，TS代码不会解析它，导致浏览器直接将{{this.customer.address}}作为纯字符串参数传递给谷歌地图，而非替换为实际的地址值。

解决方法

在TS代码中，需要用ES6模板字符串（反引号包裹，通过${变量}插入值）或者字符串拼接的方式来构建URL：

基础修正版`openExternalUrl`方法

openExternalUrl(): void {
    // 使用ES6模板字符串（推荐写法）
    window.location.href = `https://maps.google.com/?q=${this.customer.address},${this.customer.city}`;
}

安全优化版（推荐）

考虑到地址可能包含空格、特殊字符导致URL解析异常，同时避免空值报错，建议增加参数编码和空值判断：

openExternalUrl(): void {
    const address = this.customer?.address;
    const city = this.customer?.city;
    if (address && city) {
        // 对地址参数编码，兼容特殊字符
        const encodedAddress = encodeURIComponent(address);
        const encodedCity = encodeURIComponent(city);
        window.location.href = `https://maps.google.com/?q=${encodedAddress},${encodedCity}`;
    }
}