クリックしてdivを強調表示する角度のハイライト指示

Question

マウスのクリック時にdivをハイライトする方法を理解しようとしています。私が（onmouseup）（onmouseclickまたはonmouseClickを認識しない）場合、すべての項目が強調表示されています。以下に、ディレクティブコードを示します。 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

あなたは@ViewChildrenディレクティブを使用して要素のリストを参照し、これに基づいて、現在のselect要素の選択を解除することができます。このリストは、各要素の入力として提供する必要があります。ここで

はサンプルです：

@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'; 
    } 
} 

そして、このディレクティブを使用する方法：https://plnkr.co/edit/LnOMPv?p=preview：ここ

@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"}  
    ]; 
} 

は作業plunkrです。