更新1：更多说明

我使用过jquery datatable(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,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()中调用此函数.

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