使用 EventEmitter 传递参数
Pass parameters with EventEmitter
我有一个指令来初始化可在 DOM 元素上排序的 jQueryUI。 jQueryUI sortable 也有一组触发特定操作的回调事件。例如,当您 start or stop 排序元素时。
我想通过 emit()
函数传递来自此类事件的 return 参数,这样我就可以实际看到我的回调函数中发生了什么。我只是还没有找到通过 EventEmiiter
.
传递参数的方法
我目前有以下内容。
我的指令:
@Directive({
selector: '[sortable]'
})
export class Sortable {
@Output() stopSort = new EventEmitter();
constructor(el: ElementRef) {
console.log('directive');
var options = {
stop: (event, ui) => {
this.stopSort.emit(); // How to pass the params event and ui...?
}
};
$(el.nativeElement).sortable(options).disableSelection();
}
}
这是我的 Component
,它使用指令发出的事件:
@Component({
selector: 'my-app',
directives: [Sortable],
providers: [],
template: `
<div>
<h2>Event from jQueryUI to Component demo</h2>
<ul id="sortable" sortable (stopSort)="stopSort(event, ui)">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>
</div>
`
})
export class App {
constructor() {
}
stopSort(event, ui) { // How do I get the 'event' and 'ui' params here?
console.log('STOP SORT!', event);
}
}
如何在我的 stopSort()
函数中获取 event
和 ui
参数?
EventEmitter 支持一个参数,它作为 $event
传递给您的事件处理程序。
将参数传递给 emit
时将参数包装在事件对象中:
this.stopSort.emit({ event:event, ui: ui });
然后,当你处理事件时,使用$event
:
stopSort($event) {
alert('event param from Component: ' +$event.event);
alert('ui param from Component: ' + $event.ui);
}
pixelbits 答案在最终版本中发生了一些变化。如果您有多个参数,只需将其作为一个对象传递即可。
子组件:
this.stopSort.emit({event,ui});
@Output() stopSort= new EventEmitter<any>();
父组件:
hereIsHeight(value) {
console.log("Height = " + value.event);
console.log("Title = " + value.ui);
}
HTML 在父组件中:
<test-child1 (stopSort)="hereIsHeight($event)"></test-child1>
-- 如果你有这样的值:(前面有 "this")
this.stopSort.emit({this.event,this.ui});
它们不起作用,您需要将它们更改为其他内容,然后像这样通过:
let val1 = this.event;
let val2 = this.ui;
this.stopSort.emit({val1,val2});
*更新:阅读下面 Colin B 的回答,了解使用 "this."
传递值的方法
我无法添加评论,只是想从 Alpha Bravo 的回答中指出,你可以通过 this.event
,你只是不能使用 属性 值 shorthand :
this.stopSort.emit({ event : this.event, ui : this.ui });
另请注意,如果它们作为 this.stopSort.emit({ val1, val2 });
通过 EventEmmiter 传递,那么它们将在父级中被访问为:
hereIsHeight(value) {
console.log(`event = ${ value.val1 }`);
console.log(`ui = ${ value.val2 }`);
}
因此,在这种情况下,避免 shorthand 可能更可取,以保持命名一致。
在child中这样工作:
@Output() myEvent: EventEmitter<boolean> = new EventEmitter();
myFunc(value: boolean) {
this.myEvent.emit(value);
}
现在您只需在 parent!
中获取活动
我有一个指令来初始化可在 DOM 元素上排序的 jQueryUI。 jQueryUI sortable 也有一组触发特定操作的回调事件。例如,当您 start or stop 排序元素时。
我想通过 emit()
函数传递来自此类事件的 return 参数,这样我就可以实际看到我的回调函数中发生了什么。我只是还没有找到通过 EventEmiiter
.
我目前有以下内容。
我的指令:
@Directive({
selector: '[sortable]'
})
export class Sortable {
@Output() stopSort = new EventEmitter();
constructor(el: ElementRef) {
console.log('directive');
var options = {
stop: (event, ui) => {
this.stopSort.emit(); // How to pass the params event and ui...?
}
};
$(el.nativeElement).sortable(options).disableSelection();
}
}
这是我的 Component
,它使用指令发出的事件:
@Component({
selector: 'my-app',
directives: [Sortable],
providers: [],
template: `
<div>
<h2>Event from jQueryUI to Component demo</h2>
<ul id="sortable" sortable (stopSort)="stopSort(event, ui)">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>
</div>
`
})
export class App {
constructor() {
}
stopSort(event, ui) { // How do I get the 'event' and 'ui' params here?
console.log('STOP SORT!', event);
}
}
如何在我的 stopSort()
函数中获取 event
和 ui
参数?
EventEmitter 支持一个参数,它作为 $event
传递给您的事件处理程序。
将参数传递给 emit
时将参数包装在事件对象中:
this.stopSort.emit({ event:event, ui: ui });
然后,当你处理事件时,使用$event
:
stopSort($event) {
alert('event param from Component: ' +$event.event);
alert('ui param from Component: ' + $event.ui);
}
pixelbits 答案在最终版本中发生了一些变化。如果您有多个参数,只需将其作为一个对象传递即可。
子组件:
this.stopSort.emit({event,ui});
@Output() stopSort= new EventEmitter<any>();
父组件:
hereIsHeight(value) {
console.log("Height = " + value.event);
console.log("Title = " + value.ui);
}
HTML 在父组件中:
<test-child1 (stopSort)="hereIsHeight($event)"></test-child1>
-- 如果你有这样的值:(前面有 "this")
this.stopSort.emit({this.event,this.ui});
它们不起作用,您需要将它们更改为其他内容,然后像这样通过:
let val1 = this.event;
let val2 = this.ui;
this.stopSort.emit({val1,val2});
*更新:阅读下面 Colin B 的回答,了解使用 "this."
传递值的方法我无法添加评论,只是想从 Alpha Bravo 的回答中指出,你可以通过 this.event
,你只是不能使用 属性 值 shorthand :
this.stopSort.emit({ event : this.event, ui : this.ui });
另请注意,如果它们作为 this.stopSort.emit({ val1, val2 });
通过 EventEmmiter 传递,那么它们将在父级中被访问为:
hereIsHeight(value) {
console.log(`event = ${ value.val1 }`);
console.log(`ui = ${ value.val2 }`);
}
因此,在这种情况下,避免 shorthand 可能更可取,以保持命名一致。
在child中这样工作:
@Output() myEvent: EventEmitter<boolean> = new EventEmitter();
myFunc(value: boolean) {
this.myEvent.emit(value);
}
现在您只需在 parent!
中获取活动