Angular 2指令中的@HostListener不允許操縱元素

我正在嘗試編寫一個Angular 2指令來重新創建Foundation Zurb Accordion組件的功能。我試圖做一些我認爲很簡單的事情。我創建了一個指令並添加了一個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>

來源

2016-10-25 Jusef

你應該使用@hostbinding改變元素東道國

來源

2017-09-03 23:24:12 Jonathan

Angular 2指令中的@HostListener不允許操縱元素

回答

相關問題