时间戳

首页 > 解决方案 > Angular使组件的一部分不可点击

html - Angular使组件的一部分不可点击

问题描述

所以我有这个组件，它是一个按钮，当点击它时，它会导航到某个路线。但是，我想在其中放置一个按钮，这不会使其导航并执行其他操作。

我该怎么做呢？它是关注/取消关注按钮。

<button type="button" class="btn" (click)='navigate()' *ngIf="searchResult.username"><mat-card>
  <mat-card-header>
    <mat-card-title>{{searchResult|null:['firstname']}} {{searchResult|null:['lastname']}}</mat-card-title>
  </mat-card-header>
  <mat-card-content class="container">
    <div>{{searchResult|null: ['username']}}</div>
    <div>
      <!-- option to follow -->
  
      <div *ngIf="!result.followers.includes(this.selfUsername)" class="follow">
        <button mat-raised-button (click)="onFollow()">
          Follow
        </button>
      </div>
  
      <!-- already following -->
  
      <div *ngIf="result.followers.includes(this.selfUsername)" class="follow">
        <button mat-raised-button (click)="onUnfollow()">
          Unfollow
        </button>
      </div>
    </div>
    <div>
      <!-- dunno why these dont work -->
      <!-- <p *ngFor="let item of searchResult|null:['history']">{{item}}</p> -->
    </div>
    <div>
      <!-- <p *ngFor="let item of searchResult|null:['whishlist']">{{item}}</p> -->
    </div>
  </mat-card-content>
</mat-card>
</button>

标签： htmlangularangular-material

解决方案

仅在进行交互时使用按钮标签，例如调用执行某些操作的函数。

在你的情况下，如果你想放置任何按钮，你想在某个地方“超链接”（在这种情况下它是一张垫卡）和里面......比方说。

对于导航，您应该始终使用锚标记，例如<a ... href="" 或 routerLink="">...content </a>

所以，只需将根 <button ...> 更改为 <a ...>.....

应该就是这样。

推荐阅读