访问主机绑定Angular2中的Next Div

Question

我想访问指令所在的下一个div。

我的指示

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

@Directive({
  selector:'[tDropdown]'
})

export class DropdownDirective{

  @HostBinding('class.hidden') get opened(){
      return this.isOpen;
  }

  @HostListener('click') open(){
      this.isOpen = false ;
  }

  @HostListener('mouseleave') close(){
    this.isOpen = true;
  }

  private isOpen = true;

}

<div class="well box" tDropdown>
          <span>Group :-</span>{{entry.key}}
            <div> // access this div from the directive
              <table class="table">
                  <thead class="thead-inverse">
                  <tr>

如何从放置指令的元素访问后续div？

Answer 1

  class DropdownDirective {

    constructor(private elRef:ElementRef) {}

    ngAfterContentInit() {
      var div = this.elRef.nativeElement.querySelector('div')
      div.classList.add('hidden');
    }

如果您想在父组件上执行此操作

@ViewChild(DropdownDirective, {read: ElementRef}) elRef:ElementRef;

click() {
  var div = this.elRef.nativeElement.querySelector('div')
  div.classList.add('hidden');
}