Estoy trabajando en este blog que tiene una página que enumera todas las publicaciones. Así que agregué estilos personalizados y activos a cada una de las publicaciones, de modo que cuando se desplace, mostrará un color diferente y una intensidad de sombra de cuadro basada en cada publicación.

Supongamos que Post1 tiene un color rojo asociado, por lo que su color de sombra de cuadro predeterminado será rojo y su desenfoque será de 10 px. Pero cuando se desplaza o se hace clic, la sombra del cuadro también será roja, pero el desenfoque será de 30 px para enfocar que se está desplazando o haciendo clic.

Ahora, para la publicación 2, si el color asociado es azul, tendrá un color de sombra de cuadro predeterminado y flotante/activo para ser azul y el desenfoque será de 10 px y 30 px respectivamente.

Cuando se hace clic fuera de una publicación o en otra publicación, la sombra de cuadro activa en la publicación actual volverá a su valor predeterminado (10 px). Y esto es lo que no puedo lograr en este momento. La sombra activa en la publicación actual no desaparece.

Este es el componente:

 @Component({ selector: 'post', templateUrl: './post.component.html', styleUrls: ['./post.component.scss'] }) class Post { hoverPostId: number; clickedPostId: number; constructor() {} defaultStyle( color ) { const boxShadow = `1px 10px 1px ${color}`; return { 'box-shadow': boxShadow }; } hoverActiveStyle( color ) { const boxShadow = `1px 30px 1px ${color}`; return { 'box-shadow': boxShadow }; } postActive( postId: number ) { if ( this.post.id === postId ) { this.clickedPostId = postId; } else { this.clickedPostId = null; } } mouseEnter( postId: number ) { this.hoverPostId = postId; } mouseLeave() { this.hoverPostId = null; } } export default Post;

Esta es la plantilla:

 <div class="post" [ngStyle]="hoverPostId === post.id || clickedPostId === post.id ? hoverActiveStyle(post.color) : defaultStyle(post.color)" (mouseenter)="mouseEnter(post.id)" (mouseleave)="mouseLeave()" (click)="postActive(post.id)" > // post content </div>

Tenga en cuenta que no puedo codificar los estilos en el archivo scss para pasar el mouse y la clase activa porque cada uno de los colores de las publicaciones será único. Así que por favor no sugiera eso.

=======ACTUALIZAR========

También vale la pena mencionar que en mi componente Publicar tengo acceso a la publicación que está seleccionada. Algo como this.posts.selected que devuelve una matriz de una sola publicación que ha sido seleccionada. Devuelve vacío si no está seleccionado.