Angular - liaison d'événement

Question

Voici un panneau Bootstrap. Si l'utilisateur clique sur l'icône, les parties cachées deviennent invisibles, mais ce dont j'ai besoin est de ne montrer que la partie sur laquelle j'ai cliqué. Je pourrais y arriver en définissant toutes les actions par moi-même, mais comment le faire de manière plus générique?

a essayé de passer $event, comme ceci:

<i class="glyphicon glyphicon-menu-down clickable" (click)="onClick($event)"></i> 

Et

onClick(event: any) { 
    event.target.clicked = !event.target.clicked; 
    } 

Mais sans chance ..

Answer 1

Si vous êtes à la recherche d'une solution générique, réutilisable, juste écris une directive pour faire ce que tu demandes. Ensuite, il suffit de le déclarer dans le bon module et de l'ajouter aux éléments.

@Directive({ 
    selector: '[appHideOnClick]' 
}) 
export class HideOnClickDirective { 



    @HostListener('click') onClick() { 
     // toggle hidden on clicked 
     this.isHidden = !this.isHidden; 
    } 

    @HostBinding('hidden') isHidden = false; // initialize without hidden attribute 

    constructor() {} 
} 

puis dans votre balisage:

<div class="panel-body" appHideOnClick > 

Rappelez-vous que chaque élément angulaire a le style d'attribut hidden attaché. Vous devrez peut-être modifier la directive soit d'appliquer display: none au style de l'élément, ou tenir une règle globale pour l'attribut hidden dans le styles.css/styles.scss:

[hidden] { 
    display: none; // may need to be !important 
}