如果已将一个HTML元素添加到DOM中(例如在单击按钮后),我们如何访问此元素? viewChild看不到 .
Update 1: 更多说明
我使用了jquery数据表(jquery.dataTables definitelyTyped version) . 基于this链接,我可以添加新列并在其中定义html . 我写了这段代码:
columnDefs: [
{
render: function (data, type, row) {
return `
<a href="admin/edituser/` + row.UserId+ `" class="btn btn-outline btn-circle btn-sm green"><i class="fa fa-edit" > </i> Edit </a>`+
`<a [routerLink]="['Delete']" class="btn btn-outline btn-circle btn-sm red"><i class="fa fa-trash-o" > </i> Delete </a>
`;
},
targets: 5
},
],
使用Chrome开发者工具,我看到了:
第一个锚标签可以工作但是使用href,而不是routerLink .
第二个锚标记不起作用,因为角度指令不符合href .
我试图使用DynamicComponentLoader来编译它,并改变了这样的代码:
但我无法使用viewChild访问#target元素 . (我想通过loadNextToLocation用另一个组件更改它) . 我认为这不是优化获得好结果的方法 .
我想在jquery datatable中使用routerLink和命令按钮 .
你能帮我解决这个问题吗?
先感谢您 .
解决方案:
如果要使用javascript或某些回调函数将DOM添加到DOM,请首先确定模板中的标记,该标记可以作为将来这些元素的父级 .
- 将模板变量添加到此父元素 . (例如#target)
<th> Email</th>
<th> Date </th>
<th> Phone </th>
<th> Commands</th>
</tr>
</thead>
<tbody #target></tbody>
<tfoot>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</tfoot>
</table>
- 然后为你的html代码添加一个简单的类和一个简单的属性(这个代码是在用angular编译的页面之后生成的,你也可以用typescript或javascript编写一些代码来生成html) .
columnDefs: [
{
render: function (data, type, row) {
return `
`<a date-id="` + row.UserId + `" class="editbtn btn btn-outline btn-circle btn-sm red"> Edit</a>
`;
},
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<Element> = 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.
1 回答
如果您动态添加HTML(如
[innerHTML]="someHtml"
),则可以通过注入ElementRef
并使用ElementRef.nativeElement.querySelector...
来使用直接DOM访问(在Angular2中不赞成)如果使用
*ngFor
生成HTML,则可以添加模板变量并查询这些元素然后在组件类中