将参数传递给角度指令

Question

每次事件发生时，我都会让小猫了解全局 Angular 变化检测的数量，我发现 Angular 2 runOutsideAngular still change the UI 我采用了“OutSideEventHandlerDirective”策略。

但是，现在我有一个文件，其中包含 6 个指令，每个指令用于不同的事件类型。

我想做的是将事件类型传递给指令；即设置 @Input() 事件：字符串 = '我的事件类型' 在模板 html 的指令内。

这可能吗？

所以，谢谢你到目前为止的回答。 添加为编辑以提供比评论更好的演示：

要学习的东西：

1/ @input () xyz: string = 'hello' - 您可以使用 (outSideEventHandler)="onEv($event)" [xyz]="goodbye"

在模板中设置此输入

2/ @input ('abc') xyz: string = 'hello' - “重命名”你用来引用输入的东西，即现在你使用 [abc]="goodbye"

问题补充：

3/ 我在同一个元素上使用了两个或多个“外部”指令。 如果你有 (outSideEventHandler)="onEvent1($event)" [event]="mousedown" (outSideEventHandler)="onEvent2($event)" [event]="mouseup" - 那么你会得到两个指令副本，但是两者都使用 event=mousedown。

我可以创建指令的两个（或更多）副本（请参阅code），然后为每个具有单独的唯一命名输入。但这是唯一的方法吗？

  (outSideEventHandler1)="onTestDirective($event)" 
  [outSideEvent1]="'mousedown'" 
  (outSideEventHandler2)="onTestDirective($event)" 
  [outSideEvent2]="'mouseup'" 

Answer 1

您可以通过使用带有 @Input 装饰器的别名来添加其他参数。

这是一个示例，您可以如何使用另一个参数从链接的帖子中扩展指令。

import { NgZone, ElementRef, EventEmitter, Input, Output, Directive } from '@angular/core'

@Directive({
  selector: '[outSideEventHandler]'
})
export class OutSideEventHandlerDirective {
  private handler: Function;

  @Input() event: string = 'click'; // pass desired event
  @Output('outSideEventHandler') emitter = new EventEmitter();
  @Input('outSideEventType') type = 'default type';

  constructor(private ngZone: NgZone, private elRef: ElementRef) {}

  ngOnInit() {
    console.log(this.type);
    this.ngZone.runOutsideAngular(() => {
      this.handler = $event => this.emitter.emit($event);
      this.elRef.nativeElement.addEventListener(this.event, this.handler);
    });
  }

  ngOnDestory() {
    this.elRef.nativeElement.removeEventListener(this.event, this.handler);
  }
}

你可以这样使用它：

<button (outSideEventHandler)="onTestDirective()" [outSideEventType]="'My type'">Test Directive</button>

这里还有一个link 指向实现它的 StackBlitz 示例。它将类型输出到控制台日志中，以便您可以确定它是否已应用。

这也是多事件处理程序注册的解决方案，也可以回答您的添加。 为此，我认为最好的解决方案是仅使用默认输入参数并将一组事件名称和处理程序对发送到指令。例如，您可以创建一个对象 EventHandler：

export class EventHandler {
  public event: string;
  public handler: EventListener;
}

然后将指令更改为仅接受一个默认输入，即 EventHandler 对象数组。

import { NgZone, ElementRef, EventEmitter, Input, Output, Directive } from '@angular/core';
import { EventHandler } from './event-handler';

@Directive({
  selector: '[outSideEventHandlers]'
})
export class OutSideEventHandlerDirective {
  @Input() public outSideEventHandlers: EventHandler[];


  constructor(private ngZone: NgZone, private elRef: ElementRef) {}

  ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
      for (let eventHandler of this.outSideEventHandlers) {
        console.log(eventHandler.event);
        this.elRef.nativeElement.addEventListener(eventHandler.event, eventHandler.handler);
      }

    });
  }

  ngOnDestory() {
    for (let eventHandler of this.outSideEventHandlers) {
        this.elRef.nativeElement.removeEventListener(eventHandler.event, eventHandler.handler);
      }
  }
}

那你在模板中这样使用：

<button [outSideEventHandlers]="[{ event: 'click', handler: onClick }, { event: 'mousedown', handler: onMouseDown }, { event: 'mouseup', handler: onMouseUp}]">Test Directive</button>

这样，您可以在同一元素上添加任意数量的处理程序，而无需在指令上添加任何其他属性。这是实现此方法的 StackBlitz 示例的link。

Answer 2

Directive({
    selector: '[testDirective]'
})
export class TestDirective implements OnInit {

    @Input() testDirective: string;

    @Input() otherInput: string = 'Saving'; // if you need more than one input
}

模板

<button [testDirective]="<event-name>" // this will add the directive and also set the input
        [otherInput]="<other-input>"> // other input
</button>