angular - 将参数传递给 typescript 中的 Angular Directive(指令)

Question

我有以下指令。我正在尝试传递单击链接/按钮时需要切换的类名。我在调试控制台中一直未定义。 HostListener 采用参数数组 - 我想我不确定如何传递它们并且似乎无法找到它的示例。

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

谢谢。

Answer 1

您可以在指令的 Input 绑定(bind)中传递类名。您可以在任何实例中轻松检索绑定(bind)的值。

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