在typescript中将参数传递给angular指令

我有以下指示。我试图传递在单击链接/按钮时需要切换的类名。我一直在调试控制台中未定义。HostListener接受一个arg数组-我想我不知道如何传递它们，似乎找不到它的示例

   @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');

  }
}

我在我的组件中这样使用它：

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

谢谢。

你可以像这样通过考试：

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

或者使用注入的

ElementRef

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

或者在指令的contstructor中插入

@Attribute

：

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

---

您可以在指令的

绑定
输入中传递类名。您可以在任何实例上轻松检索绑定值

@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>


或
+1我个人喜欢第一种，这三种方式都更好。问：如果我想将一些动态值传递给
HostListner
函数，会发生什么情况？@PankajParkar我不会争辩：）我只是在寻找标准输入以外的东西：）我比你高得多too@PankajParka对于动态值，我们可以使用
[attr.name]
所以我们不依赖@Input属性，我们的类中只有一行）不，我不这样做。我很想知道，我100%确信你们一定知道更好的方法