Se um elemento HTML foi adicionado ao DOM (por exemplo, após clicar no botão), como podemos acessar esse elemento? O viewChild não pode ver isso.

Atualização 1: Mais descrições

Eu usei jquery datatable (jquery.dataTables definitivamenteTipo de versão) Base emesta link, posso adicionar uma nova coluna e definir html dentro dela. Eu escrevi este código:

           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
                    },
                ],

Com as ferramentas de desenvolvedor do Chrome, vejo o seguinte:

A primeira marca âncora funciona, mas com href, não routerLink.

A segunda tag âncora não funciona porque as diretivas angulares não obedecem ao href.

Tentei usar o DynamicComponentLoader para compilá-lo e alterei o código assim:

Mas não consigo acessar o elemento #target com viewChild (quero alterá-lo com outro componente por loadNextToLocation). Eu acho que isso não é uma maneira otimizada de obter bons resultados.

Eu quero usar o routerLink com botões de comandos dentro de jquery datatable.

Poderia me ajudar na direção certa para resolver isso?

Agradeço antecipadamente.

solução:

Se você deseja adicionar HTML ao DOM com javascript ou alguma função de retorno de chamada, determine primeiro uma tag do modelo que possa ser pai desses elementos no futuro.

Adicione variável de modelo a este elemento pai. (# Target por exemplo)

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

Em seguida, adicione uma classe simples e um atributo simples ao seu código html (este código é gerado após a página compilada com angular. Você também pode escrever algum código com texto ou javascript para gerar 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
                },
            ],

Agora importe e injete essas fontes no seu componente:

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

e:

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

Defina uma variável viewChild na sua classe de componente:

    @ViewChild('target') target;

Escreva uma função como esta:

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

}

Você deve encontrar o melhor local para chamar essa função, por exemplo, o retorno de chamada de dados ajax é uma opção e chamar AfterEverything () dentro disso. Você pode chamar essa função dentro de ngAfterViewInit ().

Observe que algumas vezes é necessário um atraso de vários segundos para garantir que todos os novos elementos sejam criados.