Angular 2指令中的@HostListener不允许操纵元素

Question

我正在尝试编写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> 

Answer 1

您应该使用@hostbinding更改元素主机状态