@HostListener в директиве Angular 2 не позволяет манипулировать элементами

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 изменить состояние элемента узла