중첩 된 요소에서 선택한 li의 색을 변경하는 지시문

Question

다음과 같이 중첩 된 ul 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> 

기능을 할 것 getter를 사용하는 경우 공유 서비스 및 지시문에 관찰 가능하도록 등록하고 getter 대신 isSelectedClass 속성을 업데이트하는 것이 더 효율적일 수 있습니다.