選択されたliの色をネストされたul li要素から変更するための角度指示文

Question

以下は、ul li要素をネストしました。私はそれをクリックすると、選択したノードliの background-colorを変更したい、同時に変更する必要はありませんbackground-color 選択されていないノード。私は、任意のノード上の白にbackground-colorを変更するには、親のディレクティブを作成している

---

import { Directive,ElementRef,HostListener,ViewChild } from '@angular/core'; 

@Directive({ 
    selector: '[Parent]' 
}) 
export class ParentDirective { 

    constructor(private elem:ElementRef) {} 

    @HostListener('click') doOnClick(){   
    this.changeBackgroundColor("red");  
    } 

    private changeBackgroundColor(color: string) { 
    this.elem.nativeElement.style.backgroundColor = color; 
    } 
} 

<ul Parent> 
    <li Child>Child1</li> 
    <li Child>Child2</li> 
    <ul Parent> 
    <li Child>Child1</li> 
    <li Child>Child2</li> 
    <ul Parent> 
     <li Child>Child1</li> 
     <li Child>Child2</li> 
     <li Child>Child3</li> 
     <li Child>Child4</li> 
     <li Child>Child5</li> 
    </ul> 
    <li Child>Child3</li> 
    <li Child>Child4</li> 
    <li Child>Child5</li> 
    </ul> 
    <li Child>Child3</li> 
    <li Child>Child4</li> 
    <li Child>Child5</li> 
</ul> 

が選択され、子ノードディレクティブは、ノードの選択に赤に background-colorを設定します。

import { Directive,ElementRef,HostListener,ViewChild } from '@angular/core'; 

@Directive({ 
    selector: '[Child]' 
}) 
export class ChildDirective{ 

    constructor(private elem:ElementRef) {   
    this.printNativeElements(elem)  
    } 

    printNativeElements(elem){ 
    this.liCount++; 
    console.log(elem.nativeElement.parentNode.children.length); 
    } 

    @HostListener('click') doOnClick(){ 
    this.changeBackgroundColor("red"); 
    } 

    private changeBackgroundColor(color: string) { 
    this.elem.nativeElement.style.backgroundColor = color; 
    } 
} 

Answer 1

私はこの方法

@Injectable() 
class Shared { 
    selected: any; 
} 

@Directive({ 
    selector: '[Parent]' 
    // providers: [Shared], 
}) 
export class ParentDirective { 
    constructor(private shared:Shared) {} 

    @HostListener('click') 
    clickHandler() { 
    share.selected = this; 
    } 

    @HostBinding('class.selected') 
    get isSelectedClass() { 
    return shared.selected == this; 
    } 
} 

@Directive({ 
    selector: '[Child]' 
}) 
export class ChildDirective{ 
    constructor(private shared:Shared) {} 

    @HostListener('click') 
    clickHandler() { 
    share.selected = this; 
    } 

    @HostBinding('class.selected') 
    get isSelectedClass() { 
    return shared.selected == this; 
    } 
} 

<ul Parent> 
    <li Child>Child1</li> 
    <li Child>Child2</li> 
    <ul Parent> 
    <li Child>Child1</li> 
    <li Child>Child2</li> 
    <ul Parent> 
     <li Child>Child1</li> 
     <li Child>Child2</li> 
     <li Child>Child3</li> 
     <li Child>Child4</li> 
     <li Child>Child5</li> 
    </ul> 
    <li Child>Child3</li> 
    <li Child>Child4</li> 
    <li Child>Child5</li> 
    </ul> 
    <li Child>Child3</li> 
    <li Child>Child4</li> 
    <li Child>Child5</li> 
</ul> 

インにそれを行うだろうゲッターを使用してのTEAD、それに加入し、代わりにゲッターのisSelectedClassプロパティを更新するために、共有サービスやディレクティブで観察を持つことが、より効率的かもしれません。