viewChildは、angular2でjsで追加された要素をどのように取得できますか？

Question

HTML要素がDOMに追加された場合（ボタンをクリックした後など）、この要素にはどのようにアクセスできますか？ viewChildはそれを見ることができません。

アップデート1：詳しい説明

私はjqueryのデータテーブル（jquery.dataTables definitelyTyped version）を使用しました。 thisリンクをベースに、新しい列を追加してその中にhtmlを定義することができます。タグは、HREF、ないrouterLinkではなく動作します

まずアンカー：私はこれを見Chromeデベロッパーツールで

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

：私はこのコードを書きました。

角度指示がhrefに準拠していないため、2番目のアンカータグが機能しません。

私はそれをコンパイルするDynamicComponentLoaderを使用しようとしましたが、このようなコードを変更：

をしかし、私はviewChildで#target要素にアクセスすることはできません（私はloadNextToLocationによって別のコンポーネントでそれを変更したいです）。私はこれが良い結果を得るための最適な方法ではないと思う。

jqueryデータテーブル内のコマンドボタンでrouterLinkを使用します。

これを解決するには正しい方向に手伝ってください。

ありがとうございます。

ソリューション：あなたはjavascriptや、いくつかのコールバック関数をDOMにHTMLを追加したい場合は

最初将来的にこれらの要素（複数可）のための親になることができるテンプレートからタグを決定します。

1. この親要素にテンプレート変数を追加します。（例えば＃ターゲット）

      <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. は、その後、あなたのhtmlコードに単純なクラスとシンプルな属性を追加します（このコードは、angleでコンパイルされたページの後に生成されます。また、HTMLを生成するためにtypescriptまたはjavascriptでいくつかのコードを書くこともできます。

   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. は、今すぐあなたのコンポーネントにこれらのソースをインポートおよび注入：

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

   と：

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

4. コンポーネントクラスでviewChild変数を定義します。

   @ViewChild('target') target; 
   

を

5. このような関数を書く：あなたはこの関数を呼び出すのに最適な場所を見つけなければならない

   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. 、例えば、Ajaxデータのコールバックはその内1つの選択であり、（）AfterEverythingを呼び出します。 ngAfterViewInit（）の内部でこの関数を呼び出すことができます。

新しい要素がすべて作成されるようにするには、数秒の遅延が必要になることがあります。あなたは（のような[innerHTML]="someHtml"）動的にHTMLを追加する場合

Answer 1

、あなたはHTMLをテンプレート変数を追加することができます*ngForを使用して生成された場合はElementRefを注入し、ElementRef.nativeElement.querySelector...

を使用して、（Angular2に眉をひそめる）直接DOMへのアクセスを使用することができますそして

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

と、コンポーネントクラスの

@ViewChildren('someVar') elements; 

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

ように、これらの要素のためのクエリ