解决方案：

Question

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

更新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（）中调用此函数。

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

Answer 1

如果您动态添加HTML（如[innerHTML]="someHtml"），则可以通过注入ElementRef并使用ElementRef.nativeElement.querySelector...

来使用直接DOM访问（在Angular2中不赞成）

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

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

然后在组件类

中

@ViewChildren('someVar') elements;

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

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

解决方案：

1 个答案: