2
votes

Comment rendre l'ensemble du composant angulaire cliquable

J'ai 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>

Le my-component-selector est le sélecteur du composant MyComponent , qui a 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>

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?

angular angular7 angular-components

0 commentaires

3 Réponses :

1
votes

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>

2 commentaires

Oui mais j'aimerais que MyComponent soit responsable de la gestion des clics, et votre solution suggère que je gère le clic à l'intérieur de l'autre modèle de composant.

vous devez gérer le clic à l'intérieur du composant qui contient votre composant (mon sélecteur de composant) supposons que vous affichez ce composant dans le modèle home, vous devez donc gérer l'action dans le fichier ts du composant home

1
votes

si vous souhaitez gérer le clic dans le modèle. Mettez un

dans le modèle et ajoutez-y l'événement de clic

0 commentaires

4
votes

Si vous déplacez le bouton à l'intérieur de la balise a et que vous le stylisez pour prendre la largeur et la hauteur disponibles complètes, vous devriez être en mesure d'obtenir ce que vous voulez:

Modèle MyComponent:

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

MyComponent CSS

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

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

0 commentaires