viewChild, angular2'de js ile eklenen öğeleri nasıl alabilir?

Question

DOM'a bir HTML öğesi eklendiyse (örneğin, düğmesine tıkladıktan sonra), Bu öğeye nasıl erişebiliriz? viewChild bunu göremez.

Güncelleme 1: Daha açıklaması

ben jquery datatable ( jquery.dataTables definitelyTyped version) kullandım

. this linkinde, yeni sütun ekleyebilir ve bunun içinde html tanımlayabilirim. Chrome Geliştirici araçları ile

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

Bunu görmek: Bu kodu yazdım

İlk bağlantı etiketi eserler ancak href değil routerLink ile.

İkinci bağlantı etiketi işe yaramaz çünkü açısal yönergeler href'e uymuyordu.

bunu derlemek için DynamicComponentLoader kullanmaya çalıştı ve bunun gibi bir kod değiştirildi:

Ama viewChild ile #target eleman erişemez (I loadNextToLocation başka bileşeni ile değiştirmek istiyorum).. Bunun iyi sonuç almanın en iyi yolu olmadığını düşünüyorum.

jquery datatable içindeki komut düğmelerini kullanarak routerLink'i kullanmak istiyorum.

Bunu çözmek için doğru yönde bana yardımcı olabilir misiniz?

Önceden teşekkür ederiz.

çözüm:

javascript ya da bazı geri çağırma işlevi ilk gelecekte bu elemanın (ler) için bir ebeveyn olabilir şablondan bir etiket belirlemek ile DOM HTML eklemek istiyorsanız

. Bu ana öğeye

1. Ekleme şablon değişkeni. (örneğin # hedef)

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

2. Ardından (html kodu için basit bir sınıf ve basit bir özellik eklemek Bu kod, sayfa açılı olarak derlendikten sonra üretilir. Ayrıca, html oluşturmak için bazı kodları daktiloyla veya javascript ile yazabilirsiniz).Şimdi

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

3. aktarmak ve bileşene bu kaynakları enjekte:

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

   ve:

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

4. Bileşeniniz sınıfta bir viewChild değişkeni tanımlayın:

   @ViewChild('target') target; 
   

5. böyle bir işlevi yazın:

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

   }

6. Örneğin, bu işlevi çağırmak için en iyi yer bulmak zorundadır, ajax veri geri arama olan bir seçim ve içerde AfterEverything() diyoruz. Bu işlevi ngAfterViewInit() içinde çağırabilirsiniz. bazen birkaç saniyelik bir gecikme gereklidir

Not tüm yeni elemanlar oluşturulan sağlamak için. Eğer (gibi [innerHTML]="someHtml") dinamik HTML eklerseniz

Answer 1

, o zaman HTML şablonu değişkenlerini ekleyebilir *ngFor kullanılarak elde ediliyorsa ElementRef enjekte ve ElementRef.nativeElement.querySelector...

kullanarak (Angular2 içinde hoş karşılanmaz) doğrudan DOM erişimini kullanabilir ve bileşen sınıfı sonra

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

gibi, bu elemanlar için sorgulamak ve

@ViewChildren('someVar') elements; 

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