在锚标记 href 中使用三元运算符的条件 url 抛出解析错误 Angular

Question

开发者好！我试图在 html 模板中为我的锚标记 href 动态设置 URL，但我收到此错误：

Parser Error: Got interpolation ({{}}) where expression was expected at column 30 in 
[somevariable?['/somelink/{{ some.id }}?someparam={{ paramid }}&origin=origin']:'']

如果某个布尔类型的随机变量具有真值，则 href 将重定向到 URL，因此：

 <a [href]="(somevariable)?('/somelink/{{ some.id }}?someparam={{ paramid }}&origin=origin'):''">
 </a>

是否有更好的方法？...提前致谢

Answer 1

您可以将插值更改为：

<a href="{{ somevariable ? '/somelink/' + some.id + '?someparam=' + paramid + '&origin=origin' : '' }}">

但是如果 somevariable 为假，您的锚标记可能最终没有 link。因此，我建议您改为使用 *ngIf:

在该实例中隐藏锚标记

<a *ngIf="somevariable" href="{{ '/somelink/' + some.id + '?someparam=' + paramid + '&origin=origin' }}">

此外，如果 /somelink/... 是您应用中的一条路线，我建议您使用 routerLink 而不是 href，这样当用户跟随（点击） link.

Answer 2

使用Router.navigate And NavigationExtras

在 .ts 文件中

import { NavigationExtras, Router } from '@angular/router';

constructor(private router: Router) {}

 navigate() {
    const someId = 1;
    if (someVariable) {
      let navigationExtra: NavigationExtras = {
        queryParams: { someParam: 'x', origin: 'origin' },
        fragment: 'anchor',
      };

      this.router.navigate([`/somelink/${someId}`], navigationExtra);
    }
  }

在模板中：

<a (click)="navigate()">Go to ...</a>

在锚标记 href 中使用三元运算符的条件 url 抛出解析错误 Angular

Conditional url with ternary operator in anchor tag href throws Parse Error Angular

angular

href

conditional-operator