java 获取js元素,viewChild如何获取在angular2中添加了js的元素？

如果已将一个HTML元素添加到DOM中(例如在单击按钮后)，我们如何访问此元素？ viewChild看不到 .

Update 1: 更多说明

我使用了jquery数据表(jquery.dataTables definitelyTyped version) . 基于this链接，我可以添加新列并在其中定义html . 我写了这段代码：

columnDefs: [

{

render: function (data, type, row) {

return `

Edit `+

` Delete

`;

},

targets: 5

},

],

使用Chrome开发者工具，我看到了：

第一个锚标签可以工作但是使用href，而不是routerLink .

第二个锚标记不起作用，因为角度指令不符合href .

我试图使用DynamicComponentLoader来编译它，并改变了这样的代码：

但我无法使用viewChild访问#target元素 . (我想通过loadNextToLocation用另一个组件更改它) . 我认为这不是优化获得好结果的方法 .

我想在jquery datatable中使用routerLink和命令按钮 .

你能帮我解决这个问题吗？

先感谢您 .

解决方案：

如果要使用javascript或某些回调函数将DOM添加到DOM，请首先确定模板中的标记，该标记可以作为将来这些元素的父级 .

将模板变量添加到此父元素 . (例如#target)

Email Date Phone Commands

然后为你的html代码添加一个简单的类和一个简单的属性(这个代码是在用angular编译的页面之后生成的，你也可以用typescript或javascript编写一些代码来生成html) .

columnDefs: [

{

render: function (data, type, row) {

return `

` Edit

`;

},

targets: 5

},

],

现在导入并将这些源注入组件：

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

并且：

constructor(private renderer: Renderer, private router: Router)

在组件类中定义viewChild变量：

@ViewChild('target') target;

写一个这样的函数：

public AfterEverything() {

var el: HTMLElement = this.target.nativeElement;//Make an Element Object

console.log(el);

var commands: NodeListOf = el.getElementsByClassName('editbtn');//Find Element Object to get all elements with a specefic class

console.log(commands);

for (var i = 0; i < commands.length; i++) {

//Loop for add event or style

console.log(commands[i]);

//Sample event(Click for routing)

this.renderer.listen(commands[i], 'click', (event: Event) => {

var thisid = event.srcElement.getAttribute("date-id");//Get value from element

console.log(thisid);

this.router.parent.navigate(['EditUser', { id: thisid }]);//Use value to make routeLink

console.log(event.srcElement.innerHTML);

});

this.renderer.setElementStyle(commands[i], 'backgroundColor', 'yellow');//for change color(just sample)

}

}

你必须找到调用此函数的最佳位置，例如，ajax数据回调是一种选择并在其中调用AfterEverything() . 您可以在ngAfterViewInit()中调用此函数 .

Note that sometimes a delay of several seconds is necessary to ensure that all new elements are created.