angular2 动态添加按钮点击事件

在项目中,免不了要在ts代码中进行动态添加按钮;但是直接写(click),页面并不能正确渲染出按钮的点击事件。代码展示怎么动态添加点击事件:

1.使用document创建一个tr:

   const tr = document.createElement('tr');

2.在tr中添加需要的td内容;注意一下代码中的(click)事件是无效的,因为点击事件不会被渲染;

angular2 动态添加按钮点击事件_第1张图片

3.为a添加点击事件;主要使用Renderer

import{ Renderer } from '@angular/core';

constructor( private  el: ElementRef,

                   privaterenderer: Renderer) {}

var  aUpdate  =  tr.querySelector('a.bg-color-blue');

this.renderer.listen(aUpdate, 'click',   (event) => {

          event.stopPropagation();

          console.log("click update");

});

var aDelete  =  tr.querySelector('a.bg-color-red');

this.renderer.listen(aDelete, 'click' , (event) => {

          event.stopPropagation();

          console.log("click delete");

});

4.效果展示

你可能感兴趣的:(angular2 动态添加按钮点击事件)