将参数传递给打字稿中的 angular 指令

Question

我有以下指令。我正在尝试传递单击 link/button 时需要切换的 class 名称。我在调试控制台中一直未定义。 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

你可以这样传递：

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

Example 1

或使用注入ElementRef

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

Example 2

或者在你的指令的构造函数中注入@Attribute：

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

Example 3

Answer 2

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

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

将参数传递给打字稿中的 angular 指令

Passing parameter to angular directive in typescript

typescript

angular-directive

angular