Passage du paramètre à la directive angulaire dans le tapuscrit

Question

J'ai la directive suivante. J'essaye de passer le nom de classe qui doit être basculé quand le lien/bouton est cliqué. Je continue d'être indéfini dans la console de débogage. HostListener prend un tableau d'args - je suppose que je ne suis pas sûr de savoir comment les passer et ne peux pas sembler trouver un exemple de cela.

@Directive({ 
    selector: '[appSidebarToggler]' 
}) 
export class SidebarToggleDirective { 

    constructor(public elementRef: ElementRef) { 
    } 

    @HostListener('click', ['$event', '$tobeToggledClassName']) 

    toggleOpen($event: any, $tobeToggledClassName: any) { 
    $event.preventDefault(); 
    console.log("class to be toggled is - >" + $tobeToggledClassName); 
    console.log("ref - >" + this.elementRef); 
    document.querySelector(tobeToggledClassName).classList.toggle('sidebar-hidden'); 

    } 
} 

et je l'utilise comme celui-ci dans mon élément:

<a class="" href="#" sidebarToggler tobeToggledClassName="sideMenu">&#9776;</a> 

merci.

Answer 1

Vous pouvez le transmettre comme:

@HostListener('click', ['$event', '$event.target.getAttribute("tobeToggledClassName")']) 

Example 1

ou de l'utilisation injectée ElementRef

this.elementRef.nativeElement.getAttribute("tobeToggledClassName") 

Example 2

ou injecter @Attribute à contstructor de votre directive:

constructor(...@Attribute('tobeToggledClassName') private tobeToggledClassName: string) {} 

Example 3

Answer 2

Vous pouvez passer le nom de classe à l'intérieur Input liaison de directive. Vous pouvez facilement récupérer une valeur de liaison à n'importe quelle instance.

@Directive({ 
    selector: '[appSidebarToggler]' 
}) 
export class SidebarToggleDirective { 
    @Input() tobeToggledClassName: string; 
    constructor(public elementRef: ElementRef) { 
    } 

    @HostListener('click', ['$event']) 

    toggleOpen($event: any) { 
    $event.preventDefault(); 
    console.log("class to be toggled is - >" + this.tobeToggledClassName); 
    console.log("ref - >" + this.elementRef); 
    document.querySelector(this.tobeToggledClassName).classList.toggle('sidebar-hidden'); 

    } 
} 

Html

<a class="" href="#" sidebarToggler tobeToggledClassName="sideMenu">&#9776;</a> 
OR 
<a class="" href="#" sidebarToggler [tobeToggledClassName]="'sideMenu'">&#9776;</a>