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

Question

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

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

我想做的是将事件类型传递到指令中；即设置@Input() event: string = '我的事件类型'在模板 html 的指令内。

这可能吗？

所以，谢谢您迄今为止的回答。作为编辑添加，以获得比评论更好的演示:

要学习的东西:

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

在模板中设置此输入

2/@input('abc') xyz: string = '你好' - “重命名”您用来引用输入的内容，即现在您使用 [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

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>