Angular2에서 (클릭) 또는 (keyup)과 같은 이벤트 바인딩 속성을 가져 와서 새 HTML 요소에 삽입하는 방법

내 사용자 정의 Polymer 웹 구성 요소가 Angular2에서 오작동합니다. 사용자 지정 지시문으로 래핑해야했습니다 (이는 각도별로 DOM에 삽입 될 때까지 웹 구성 요소의 렌더링을 지연시킵니다).

래핑은 다음과 같이 작동합니다.

<my-custom-wrapper component="custom-fancy-element"></my-custom-wrapper>

기본적으로 발생하는 것은 지시문 이 숨겨지고이 숨겨진 요소 앞에 <my-custom-wrapper>삽입 <custom-fancy-element>됩니다. <custom-fancy-element>웹 페이지에 올바르게 표시됩니다. 문제는 같은 이벤트 바인딩 속성을 적용하고 싶을 때 (click)="someFunction()"입니다.

이것이 제가하는 것입니다:

<my-custom-wrapper component="custom-fancy-element" (click)="someFunction()">
</my-custom-wrapper>

그리고 이것이 내가 원하는 결과입니다.

<custom-fancy-element (click)="someFunction()"></custom-fancy-element>

TypeScript 내부에서이 이벤트 바인딩 속성을 가져오고 나중에 새로 만든 html 요소에 추가하는 방법은 무엇입니까? 시도 .setAttribute("on-click", "someFunction($event)");했지만 각도가 인식하지 못합니다.

다음은 새로 생성 된 HTML 요소에 추가하려는 다른 속성 (예 : value = "something"class = "alert green-stuff")을 처리하는 방법에 대한 코드 스 니펫입니다.

constructor(@Attribute('component') component: string, element: ElementRef) {
  this.component = component;
  this.element = element;

  var my_new_component = document.createElement(this.component);
  if (my_new_component.constructor !== HTMLUnknownElement) {
    if (this.element.nativeElement.getAttribute("value")){
      my_new_component.setAttribute("value", this.element.nativeElement.getAttribute("value"));
    }
    if (this.element.nativeElement.getAttribute("class")) {
      var myComponentClasses = this.element.nativeElement.getAttribute("class").split(" ");
      for (var i = 0; i < myComponentClasses.length; i++) {
        my_new_component.className += " " + myComponentClasses[i];
      }
    }
    this.webcomponent = my_new_component; // Which is just:
               // <custom-fancy-element class="blue-pattern" value="some"></custom-fancy-element>
}

}

그리고 나중에 다음과 같이 지시문 앞에 HTML 요소를 삽입합니다.

ngOnInit() {
  var parentNode = Polymer.dom(this.element.nativeElement).parentNode;
  if (parentNode) {
    Polymer.dom(parentNode).insertBefore(this.webcomponent, this.element.nativeElement);
  }
}

나는 Angular 1에서 속성을 얻고 설정하는 것이 가능할 것이라고 생각한다.

.directive('someDirective', function() {
   return {
     ...
     link: function (scope, element, attributes) {
       //assign attribute to web component
     }
}

하지만 Angular2와 TypeScript에서 어떻게할까요?