Angular highlight Direktive, um das div bei Klick zu markieren

Question

Ich versuche herauszufinden, wie das div auf Mausklick in einer Weise markieren, dass nur ein Element hervorgehoben werden sollte. Wenn ich (onmouseup) (es nicht onmouseclick oder onmouseClick erkennt) alle Elemente werden markiert. Das Folgende ist der Richtliniencode. Here is the Plnkr Code

import {Directive, ElementRef} from "@angular/core"; 

@Directive({ 
    selector:'[highlight]', 
    host: { 
    '(mouseup)': 'onMouseUp()', 
    } 

// host: { 
// '(mouseenter)': 'onMouseEnter()', 
// '(mouseleave)': 'onMouseLeave()', 
// } 
}) 
export class Highlight{ 
    private el:ElementRef; 
    constructor(el:ElementRef){ 
    this.el = el; 
    } 


    onMouseEnter(){ 
    console.log(this.el); 
    this.el.nativeElement.style.backgroundColor = 'white'; 
    this.el.nativeElement.style.backgroundColor = '#D1D301'; 
    } 
    onMouseLeave(){ 
    this.el.nativeElement.style.backgroundColor = 'black'; 
    this.el.nativeElement.style.backgroundColor = 'white'; 
    } 

    onMouseUp(){ 
    console.log(this.el); 
    this.el.nativeElement.style.backgroundColor = 'white'; 
    this.el.nativeElement.style.backgroundColor = '#D1D301'; 
    } 
} 

Answer 1

Sie könnten die Liste der Elemente verweisen auf die @ViewChildren Direktive und das aktuelle select-Element auf dieser Basis abzuwählen. Diese Liste muss als Eingabe für jedes Element bereitgestellt werden. Hier

ist ein Beispiel:

@Directive({ 
    selector:'[highlight]', 
    host: { 
    '(click)': 'select()', 
    } 
}) 
export class Highlight{ 
    private el:ElementRef; 

    constructor(el:ElementRef){ 
    this.el = el; 
    } 

    @Input() 
    elements; 

    select(){ 
    this.elements.forEach(elt => { 
     elt.unselect(); 
    }); 

    this.el.nativeElement.style.backgroundColor = 'white'; 
    this.el.nativeElement.style.backgroundColor = '#D1D301'; 
    } 

    unselect() { 
    this.el.nativeElement.style.backgroundColor = 'black'; 
    this.el.nativeElement.style.backgroundColor = 'white'; 
    } 
} 

Und die Art und Weise, diese Richtlinie zu verwenden:

@Component({ 
    selector: 'itemdisplay', 
    directives:[Highlight] 
    template: ` 
    <div *ngFor="let item of items"> 
     <div style="display:inline-block; height:80px; width: 70px; border:1px solid black;" highlight [elements]="elements"> 
     {{item.name}} 
     </div> 
    </div> 
    ` 
}) 
export class ItemDisplay{ 
    @ViewChildren(Highlight) 
    elements:Highlight[]; 

    public items = [ 
    {id:1, name:"Item1"} 
    {id:2, name:"Item2"} 
    {id:3, name:"Item3"} 
    {id:4, name:"Item4"} 
    {id:5, name:"Item5"}  
    ]; 
} 

Hier ist ein funktionierendes plunkr: https://plnkr.co/edit/LnOMPv?p=preview.