Question

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

   @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

或在你的指令的contstructor中注入@Attribute：

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

<强> Example 3

Answer 2

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

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

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

2 个答案: