Question

我在http.get方法更新我时创建表行...接收数据我使用角度2版本中的JS / jquery创建表行。

我的代码：

<tr>
    <td>2</td>
    <td>BAJAJ-AUTO</td>
    <td>14.284%</td>
    <td>27/12/2013 12:00 am</td>
    <td>30/12/2013 12:00 am</td>
    <td>1935</td>
    <td>30/12/2013 12:00 am</td>
    <td>1935</td>
    <td>31/12/2013 12:00 am</td>
    <td>2120</td>
    <td><button class="btn btn-default" onclick="processAdvise('BAJAJ-AUTO')">Process Advise</button></td>
</tr>

所以td的最后一个 - 有一个按钮，它会调用我的角度2函数来处理它 - 这个代码甚至在功能开始时也没有到达

我也试过这个无济于事：

(click) for angular 2
onclick并使用相应的HTML模板保留该功能脚本标记

Answer 1

Angular2不会以任何方式处理组件模板之外的HTML，因此预期(click)="processAdvise('BAJAJ-AUTO')不起作用。

当onclick="processAdvise('BAJAJ-AUTO')"是Angular2组件的方法时，

processAdvise()也不起作用，因为onclick只是HTML，并且在全局JS范围内搜索以这种方式分配的函数组件类。

<script>标记将从Angular2模板中删除

@Component({
  selector: '...',
  ....
})
class MyComponent {
  constructor(private elRef:ElementRef) {
  }

  addHtml() {
    // add the HTML to the DOM
    this.elRef.nativeElement.querySelector('button').addEventListener('click', (event) => this.handleClick(event));
  }

  handleClick(event) {
    // doSomething();
  }
}

Answer 2

这是我尝试过的一个简单的解决方案。在构造函数中将组件对象分配给Window对象，如下所示：

...
constructor(private elementRef: ElementRef, private emService: SomeService) {
Window["myComponent"] = this;}

onClickAJS(){alert('it works!')}
...

然后，您可以从DOM onclick =＆＃34; Window.myComponent.onClickAJS（）＆＃34;访问该组件的成员。此外，您可以从浏览器控制台调用它，如：Window.myComponent.onClickAJS（），也应该工作。这是一种hackish方式。更合适的方法是为生成的HTML创建一个组件并在运行时加载它。这篇文章是为了帮助您入门。 dynamic components

单击事件无法动态生成HTML角度2

2 个答案: