如何在 Angular2 中获取事件绑定属性，如 (click) 或 (keyup) 并将它们插入新的 html 元素中

Question

我的自定义 Polymer Web 组件出现故障 Angular2。我不得不将它们包装在自定义指令中（这会延迟 Web 组件的呈现，直到它们被 angular 插入到 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)"); 但 angular 不认识它。

下面是我如何处理其他属性的代码片段（比如 value="something" class="alert green-stuff" 我想添加到新创建的 HTML元素。

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 中做到这一点？

Answer 1

这是不支持的。您不能将 (click) 或 (keyup) 动态添加到 DOM。您可以获取一个元素并使用 addEventListener(...)

Angular2 绑定语法仅在静态添加到组件模板时有效。

如何在 Angular2 中获取事件绑定属性，如 (click) 或 (keyup) 并将它们插入新的 html 元素中

How to get hold of event binding attribute in Angular2 like (click) or (keyup) and insert them in new html element

web-component

typescript

polymer

angular