typescript - viewChild如何获取angular2中用js添加的元素？

Question

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

更新 1：更多描述

我使用了 jquery 数据表（jquery.dataTables 肯定类型版本）。基于此链接，我可以添加新列并在其中定义 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 用另一个组件更改它）。我认为这不是获得良好结果的优化方式。

我想将 routerLink 与 jquery 数据表中的命令按钮一起使用。

你能帮我在正确的方向上解决这个问题吗？

先感谢您。

解决方案：

如果您想使用 javascript 或一些回调函数将 HTML 添加到 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() 中调用此函数。

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

score 2 · Accepted Answer

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

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

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

然后在组件类中

@ViewChildren('someVar') elements;

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

typescript - viewChild如何获取angular2中用js添加的元素？

解决方案 ：

1 回答 1

Related

Reference

解决方案：