我有一个指令来初始化DOM元素上的jQueryUI排序表.jQueryUI排序表还有一组回调事件,在某些操作上触发.例如,当您 Select startstop个排序元素时.

我希望通过emit()函数传递此类事件的返回参数,这样我就可以实际看到回调函数中发生了什么.我只是还没找到通过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();
    }
}

这是my 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()函数中的eventui参数?

这是我目前的演示:http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

推荐答案

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);
}

Demo Plnkr

Angular相关问答推荐

使用注入的主机组件进行指令测试

如何在init为FALSE时以Angular 初始化主拇指擦除器-Swiper 11.0.6Angular 17 SSR

为什么在回调完成之前,可观察对象会返回?

从Angular 前端访问ASP.NET Core 8 Web API时出现CORS错误

Angular 单调服务已多次创建

所有返回缺少权限或权限不足的FireBase项目.

RxJS轮询+使用退避策略重试

react 形式之间的循环关系

Angular 信号 在 effect() 中使用 debounce

Angular 16:信号更新未能更新视图

Storybook 和 Angular 交互游戏测试未定义预期

console.log 返回 api 数据但 ERROR TypeError: Cannot read properties of undefined reading 'name'

如何设置Angular 4背景图片?

如何在angular material中使用输入类型文件

如何组合两个可观察到的结果?

安装特定版本的 ng cli

如何在 Angular 2 中链接 HTTP 调用?

'Observable' 类型上不存在属性 'filter'

Angular ngClass 和单击事件以切换类

不推荐使用 forkJoin:不推荐使用 resultSelector,而是使用管道映射