如果值为 null，如何停止传递查询参数。使用 'ng-attr-href'

Question

我是 Angular 的新手。在我的程序中，我在 <a href> 标记内传递了一些值。

当前代码是这样的

<a (click)="navigateFunction()" href="{{sceURL}}/?orderId={{orderId}}">

component.ts :

navigateFunction(){
    this.orderId = this.orderIdFormGroup.value.orderId;
    this.sceURL = "URL";
    }

如果值为空，它会像这样使用密钥重新加载。

 URL/rtap-menu/gadget-rtap-sce?orderId=

怎么改成pass only URL就是值为Null
我希望可以使用 ng-attr-href

来完成

Answer 1

尝试做

get gotoUrl() {
   return this.orderId 
        ? `${sceURL}/?orderId=${orderId}`
        : this.sceURL
}

并在html中喜欢

<a (click)="navigateFunction()" [href]="gotoUrl">

Answer 2

由于您是 angular 的新手，您应该阅读此 official guide 中路由的工作原理。特别是 routerLink 的工作原理（应该用于应用程序的内部导航）以及如何传递参数数组，例如

<a [routerLink]="['orderId', orderIdFormGroup.value.orderId]">

这消除了（点击）侦听器的需要并增加了可用性（因为链接将正确显示并且可以复制）。

How to stop passing query parameters if the value is null. Using 'ng-attr-href'