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

Question

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

更新1：更多说明

我使用了jquery datatable（ jquery.dataTables definitelyTypedd版本 ）。 基于此链接，我可以添加新列并在其中定义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，请首先确定模板中的标记，该标记可以作为将来这些元素的父级。

1. 将模板变量添加到此父元素。（例如#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> 

2. 然后在你的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 }, ], 

3. 现在导入并将这些源注入您的组件：

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

   并且：

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

4. 在组件类中定义viewChild变量：

     @ViewChild('target') target; 

5. 写一个这样的函数：

    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) } 

   }

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

请注意，有时需要几秒钟的延迟才能确保创建所有新元素。

Answer 1

如果你动态添加HTML（比如[innerHTML]="someHtml" ），那么你可以通过注入ElementRef并使用ElementRef.nativeElement.querySelector...来使用直接DOM访问（在Angular2中不赞成） ElementRef.nativeElement.querySelector...

如果使用*ngFor生成HTML，则可以添加模板变量并查询这些元素

<div *ngFor="let x of y" #someVar></div>

然后在组件类中

@ViewChildren('someVar') elements;

ngAfterViewInit() {
  console.log(this.elements);
}