为什么我必须在按钮上单击两次才能重定向到右侧 url？

Question

我在 app.component.html 文件中用 Angular material 编写了这个点击事件：

<button mat-icon-button class="icon account-icon" aria-label="Icon-button with account icon" (click)="gotoLoginPage()" routerLink={{url}}  routerLinkActive="active">
    <mat-icon>account_circle</mat-icon>
  </button>

变量url在app.component.ts文件中是这样设置的：

public url!: string;

public gotoLoginPage():void{
    if(this.currentLogIn){
      this.url="/users"
      console.log(this.url);
    }
    else{
      this.url="/users/searchUser/by_email"
      console.log(this.url);
    }

问题是我必须在按钮上单击两次（而不是一次）才能重定向到右侧 url。您知道问题的原因和解决方法吗？

Answer 1

以防万一有人遇到我同样的问题，我是这样解决的：

在 app.component.html 中，而不是以下内容：

<button mat-icon-button class="icon account-icon" aria-label="Icon-button with account icon" (click)="gotoLoginPage()" routerLink={{url}}  routerLinkActive="active">
    <mat-icon>account_circle</mat-icon>
  </button>

我这样做了：

<div *ngIf="!currentLogIn">
  <button mat-icon-button class="icon account-icon" aria-label="Icon-button with account icon" (click)="gotoLoginPage()" routerLink="/users/searchUser/by_email"  routerLinkActive="active">
    <mat-icon>account_circle</mat-icon>
  </button>
</div>
  <button mat-icon-button class="icon shopping cart-icon" aria-label="Icon-button with shopping cart icon" (click)="getCartByUser()"  routerLink="/carts/cart_by_user"  routerLinkActive="active">
    <mat-icon>shopping_cart</mat-icon>
  </button>

为了在html代码中区分这两种情况，而不是在app.component.ts文件中进行。所以现在，app.component.ts 文件看起来像这样：

export class AppComponent implements OnInit {
    constructor()
    ngOnInit():void {}
    public gotoLoginPage():void{}
}

为什么我必须在按钮上单击两次才能重定向到右侧 url？

Why do I have to click two times on a button to be redirected to the right url?

html

routes

mouseclick-event

typescript

angular-material