이벤트 이미터로 매개 변수 전달

이벤트 이미터로 매개 변수 전달

DOM 요소에서 정렬 가능한 jQuery UI를 초기화하라는 지침이 있습니다.jQuery UI 정렬 테이블에는 특정 작업에 대해 트리거하는 콜백 이벤트 집합도 있습니다.예를 들어 요소 정렬을 시작하거나 중지할 때입니다.

이러한 이벤트의 반환 매개 변수를 다음과 같이 전달하고 싶습니다.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();
    }
}

그리고 이것은 나의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);
  }
}

어떻게 하면 얻을 수 있습니까?event그리고.ui내 안의 매개 변수stopSort()기능?

여기 지금까지 제가 가지고 있는 것에 대한 데모가 있습니다: 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);
}

데모 Plnkr

픽셀 비트 응답이 최종 릴리스와 함께 약간 변경되었습니다.매개 변수가 여러 개인 경우 하나의 개체로 전달하면 됩니다.

하위 구성 요소:

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.stopSort.emit({this.event,this.ui});

작동하지 않습니다. 다른 것으로 변경한 다음 다음과 같이 통과해야 합니다.

let val1 = this.event;
let val2 = this.ui;
this.stopSort.emit({val1,val2});

*업데이트:"이것"으로 값을 전달하는 방법은 아래 콜린 B의 답변을 읽으십시오.

코멘트를 추가할 수는 없지만 알파 브라보의 답변에서 당신이 통과할 수 있다는 것을 지적하고 싶습니다.this.event속성 값을 속기로 사용할 수 없습니다.

this.stopSort.emit({ event : this.event, ui : this.ui });

---

또한 이벤트 에미타를 통해 전달되는 경우에는 다음과 같이 기록합니다.this.stopSort.emit({ val1, val2 });그런 다음 부모에서 다음과 같이 액세스할 수 있습니다.

hereIsHeight(value) {
    console.log(`event = ${ value.val1 }`); 
    console.log(`ui = ${ value.val2 }`); 
}

따라서 이러한 상황에서는 이름을 일관되게 지정하기 위해 속기를 피하는 것이 좋습니다.

어린이의 경우 다음과 같이 작동합니다.

@Output() myEvent: EventEmitter<boolean> = new EventEmitter();
myFunc(value: boolean) {
    this.myEvent.emit(value);
}

이제 여러분은 부모님 안에서 행사를 잡기만 하면 됩니다!

언급URL : https://stackoverflow.com/questions/35390765/pass-parameters-with-eventemitter