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

Posted 2023-05-07

【中文标题】viewChild如何获取angular2中用js添加的元素？

【英文标题】：How viewChild can get elements that added with js in angular2?

【发布时间】：2016-09-22 02:32:24

【问题描述】：

如果一个 html 元素被添加到 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 数据表中使用带有命令按钮的 routerLink。

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

提前谢谢你。

解决方案：

如果您想使用 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() 中调用此函数。

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

【问题讨论】：

怎么加？

例如请看这个：datatables.net/examples/advanced_init/column_render.html。我们可以使用 render 函数在列中添加一些文本（如 HTML）。想象一下，我们想要更改使用此函数创建的元素。

您添加到答案中的解决方案与我用ElementRef 解释的解决方案基本相同。您不是从 components 宿主元素开始，而是从更具体的元素开始，如 ***.com/questions/32693061/…

中所述

【参考方案1】：

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

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

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

然后在组件类中

@ViewChildren('someVar') elements;

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

【讨论】：

谢谢，但我无法解决我的问题。我更新了我的问题，提供了更多细节。

动态添加 HTML 时模板变量不起作用。您的问题没有显示 HTML 是如何添加的。您需要使用ElementRef 方法。

我找到了解决方案并将其添加到我的问题中。