Angular中使用三元运算符动态设置<a>标签href属性的正确实现

问题描述 #

现有Angular代码如下：

<a 
class="link1 link2"
href="mailto:{{this.employee}}?subject={{this.getMailService().template1(text).subject}}&body={{this.getMailService().template1(text).body}}"
target="_top">
    <div>
        <mat-icon class="icon" aria-hidden="false" fontIcon="user"></mat-icon>
    </div>
    <div>
        {{this.employee}}
    </div>
 </a>

需求是根据变量i的值动态修改href：当i <= 1时调用template1生成邮件主题和正文，否则调用template2。尝试以下写法后，点击mailto链接出现NG04002路由匹配错误：

href="i<=1 ? 'mailto:{{this.employee}}?subject={{this.getMailService().template1(text).subject}}&body={{this.getMailService().template1(text).body}}':'mailto:{{this.employee}}?subject={{this.getMailService().template2(text).subject}}&body={{this.getMailService().template2(text).body}}'"

错误信息：

Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL segment: 'i'
Error: NG04002: Cannot match any routes. URL segment: 'i'

请问如何在Angular中正确实现该需求？

解决方法 #

你之前的写法错误在于把Angular插值语法{{}}和原生字符串拼接混在一起，导致浏览器把整个三元表达式当成了URL的一部分，从而触发路由匹配错误。下面提供两种正确实现方式：

方法1：模板内直接用属性绑定处理

使用Angular的[href]属性绑定语法，在绑定表达式里完成三元判断和字符串拼接，模板里无需加this.：

<a 
class="link1 link2"
[href]="`mailto:${employee}?subject=${i <= 1 ? getMailService().template1(text).subject : getMailService().template2(text).subject}&body=${i <= 1 ? getMailService().template1(text).body : getMailService().template2(text).body}`"
target="_top">
    <div>
        <mat-icon class="icon" aria-hidden="false" fontIcon="user"></mat-icon>
    </div>
    <div>
        {{employee}}
    </div>
 </a>

方法2：组件类封装方法（推荐，更易维护）

把逻辑抽离到组件类中，避免模板里的重复代码和复杂表达式：

// 组件类代码
// 建议提前注入邮件服务，避免频繁调用getMailService()
constructor(private mailService: MailService) {}

getMailtoLink(): string {
    // 根据i的值选择对应的模板
    const template = this.i <= 1 ? this.mailService.template1(this.text) : this.mailService.template2(this.text);
    // 拼接完整的mailto链接
    return `mailto:${this.employee}?subject=${template.subject}&body=${template.body}`;
}

然后在模板中直接绑定这个方法：

<a 
class="link1 link2"
[href]="getMailtoLink()"
target="_top">
    <div>
        <mat-icon class="icon" aria-hidden="false" fontIcon="user"></mat-icon>
    </div>
    <div>
        {{employee}}
    </div>
 </a>

这种方式让模板更简洁，后续修改逻辑也更方便。

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