用于从嵌套的ul li元素更改所选li的颜色的Angular指令

Question

我嵌套了ul li元素，如下所示。我想在点击它时更改所选background-color节点的li，同时不应更改未选择的节点background-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>

---

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

我创建了一个父指令，用于在任何节点上将background-color更改为白色，以及一个子节点指令，用于在节点选择上将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>

在共享服务和指令中使用observable而不是使用getter可能更有效，可以订阅它并更新isSelectedClass属性而不是getter。