我有以下模板:
<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>
如您所见,单击项目描述会将我重定向到详细信息,但我希望整个组件都可以单击,而不仅仅是文本。 我该如何实现?
答案 0 :(得分:4)
如果将按钮移到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>
MyComponent CSS
::ng-deep my-component-selector{
display:flex;
flex-grow:1;
}
a{
display:inline-block;
width:100%;
}
我已经创建了一个快捷的escaped。
答案 1 :(得分:1)
您可以在组件上使用click事件,一旦您单击组件,它将调用操作
<my-component-selector class="myItem" [item]="item" (click)="DoSth($event)"></my-component-selector>
答案 2 :(得分:1)
如果要处理模板中的单击。将<div>
放在模板中,然后在其中添加click事件