angular - 如何使整个 Angular 组件可点击

Question

我有以下模板:

<mat-nav-list class="myList">
    <a mat-list-item *ngFor="let item of items">
        <my-component-selector class="myItem" [item]="item"></my-component-selector>
    </a>
</mat-nav-list>

my-component-selector 是 MyComponent 组件的选择器，其模板如下:

<a class="item-description" routerLink="/details/{{item.getId()}}">{{item.getDescription()}}</a>
<button mat-icon-button (click)="deleteItem(); $event.stopPropagation();"><mat-icon>delete</mat-icon></button>

如您所见，单击项目描述会将我重定向到详细信息，但我希望整个组件都可单击，而不仅仅是文本。 我怎样才能实现这一目标？

Answer 1

如果您将按钮移动到 a 标签内并设置其样式以采用完整的可用宽度和高度，您应该能够获得您想要的结果:

我的组件模板:

<a class="item-description" routerLink="/details/{{item.getId()}}">
  {{item.getDescription()}}
  <button mat-icon-button (click)="deleteItem(); $event.stopPropagation();"><mat-icon>delete</mat-icon></button>
</a>

我的组件CSS

::ng-deep my-component-selector{
    display:flex; 
    flex-grow:1;
}
a{
  display:inline-block;
  width:100%;
}

我创建了一个快速的Stackblitz .