Angular 如何使整个角度组件可单击

我有以下模板：

<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>

MyComponent选择器

是

MyComponent

组件的选择器，它具有以下模板：

<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>

{{item.getDescription（）}
删除

如您所见，单击项目描述会将我重定向到详细信息，但我希望整个组件都可以单击，而不仅仅是文本。

---

如何实现这一点？

您可以在组件上使用click事件，它将在您单击组件后调用操作

 <my-component-selector class="myItem" [item]="item" (click)="DoSth($event)"></my-component-selector>

如果要处理模板中的单击。在模板中放置一个

，并在其中添加单击事件

如果您将按钮移动到

a

-标记的内部，并将其设置为完整的可用宽度和高度，您应该能够获得所需的：

MyComponent模板：

<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>

---

我已经创建了一个快速“n”dirty。

是的，但我想让

MyComponent

负责处理单击，您的解决方案建议我处理其他组件模板的内部单击。您应该处理包含组件的内部单击组件（我的组件选择器）假设您在主模板中显示此组件，因此您应该在主组件ts文件中处理该操作