gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 20:11:06 25 4
gpt4 key购买 nike

每次事件发生时,我都在关注全局 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'"

最佳答案

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>

关于angular - 将参数传递给 Angular Directive(指令),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53599458/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com