J'ai le modèle suivant:

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

Le my-component-selector est le sélecteur du composant MyComponent, qui a le modèle suivant:

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

Comme vous pouvez le voir, cliquer sur la description de l'article me redirige vers les détails, mais j'aimerais que tout le composant soit cliquable, pas seulement le texte. Comment puis-je y parvenir?

2
saæ 20 mars 2019 à 12:44

3 réponses

Meilleure réponse

Si vous déplacez le bouton à l'intérieur de la balise a - et que vous le stylisez pour qu'il prenne la largeur et la hauteur disponibles, vous devriez pouvoir obtenir ce que vous voulez:

Modèle 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>

CSS MyComponent

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

J'ai créé un Stackblitz de quick'n'dirty.

4
coreuter 20 mars 2019 à 10:12

Vous pouvez utiliser l'événement click sur le composant, il appellera l'action une fois que vous aurez cliqué sur le composant

 <my-component-selector class="myItem" [item]="item" (click)="DoSth($event)"></my-component-selector>
1
Kenana Reda 20 mars 2019 à 09:51

Si vous souhaitez gérer le clic dans le modèle. Mettez un <div> dans le modèle et ajoutez-y l'événement de clic

1
Jon Fernandez 20 mars 2019 à 10:00