0
Foundation Zurb Accordionコンポーネントの機能を再現するために、Angular 2ディレクティブを作成しようとしています。私は単純だと思ったことをしようとしました。私はディレクティブを作成し、Clickイベントを待機するHostListenerを追加しました。しかし、私がHostListener内で行うことは、ホスト要素自体の操作以外には無視されるようです。私は、クリックされたアコーデオンリンクの親要素を選択し、コンテンツdivを表示ブロックに設定しようとしていました（下のコードを参照）。私は何か基本的なことを逃していますAngular 2ディレクティブの@HostListenerで要素を操作できません
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>