Angular 2 指令中的 @HostListener 不允许操作元素答案

【问题标题】：@HostListener in Angular 2 directive is not allowing to manipulate elementsAngular 2 指令中的 @HostListener 不允许操作元素
【发布时间】：2017-03-08 03:56:10
【问题描述】：

我正在尝试编写一个 Angular 2 指令来重新创建 Foundation Zurb Accordion 组件的功能。我试图做一些我认为很简单的事情。我创建了一个指令并添加了一个 HostListener 来监听点击事件。然而，除了对宿主元素本身的操作之外，我在 HostListener 中所做的任何事情似乎都被忽略了。我只是想选择单击的手风琴链接的父元素并将其内容 div 设置为显示块（请参见下面的代码）。我错过了一些基本的东西吗？

import {Component, OnInit, ElementRef, Renderer, HostListener} from '@angular/core';
import {Directive} from "@angular/core/src/metadata/directives";

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

export class SdAccordionComponent implements OnInit {

  constructor(private el: ElementRef, private renderer: Renderer) {
  }

  ngOnInit() {
  }

  @HostListener("document:click", ['$event']) onClick(e){
    var clickedEl = e.target;
    var classList = clickedEl.classList;
    if(classList.contains('accordion-item')){
      //This comes back as null but if I try the selector in debig mode in console it works
      var contentEl = clickedEl.parentNode.querySelector('.accordion-content');
      //this console.log never gets executed
      console.log(contentEl);

      if(classList.contains('is-active')){
        classList.remove('is-active'); //this works
        this.renderer.setElementStyle(contentEl, 'display', 'block'); //this does not work
      }else{
        classList.add('is-active');
        this.renderer.setElementStyle(contentEl, 'display', 'none');
      }
    }

    return false;
  }

}

  <ul class="accordion" sdAccordion>
    <li class="accordion-item" data-accordion-item>
      <a href="#" class="accordion-title">Accordion 1</a>
      <div class="accordion-content" data-tab-content>
        I would start in the open state, due to using the `is-active` state class.
      </div>
    </li>
    <li class="accordion-item" data-accordion-item>
      <a href="#" class="accordion-title">Accordion 2</a>
      <div class="accordion-content" data-tab-content>
        I would start in the open state, due to using the `is-active` state class.
      </div>
    </li>
  </ul>

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

你应该使用@hostbinding 来改变元素宿主状态

【讨论】：