typescript - angular2でjsで追加された要素をviewChildが取得するにはどうすればよいですか?

Question

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

更新 1:説明の追加

jquery データテーブル ( jquery.dataTables enrollTyped version ) を使用しました。このリンクに基づいて、新しい列を追加し、その中に 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 開発者ツールを使用すると、次のように表示されます。

最初のアンカータグは機能しますが、routerLink ではなく href で機能します。

angular ディレクティブが href に準拠していないため、2 番目のアンカータグが機能しません。

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 データコールバックは 1 つの選択肢であり、その中で AfterEverything() を呼び出します。この関数は ngAfterViewInit() 内で呼び出すことができます。

すべての新しい要素が確実に作成されるようにするには、数秒の遅延が必要になる場合があることに注意してください。

score 2 · Accepted Answer

HTML を動的に追加する場合 (のように)、直接 DOM アクセスを使用[innerHTML]="someHtml"できます (Angular2 では眉をひそめます)。ElementRefElementRef.nativeElement.querySelector...

を使用して HTML が生成されている*ngFor場合は、テンプレート変数を追加して、これらの要素を次のようにクエリできます。

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

そして、コンポーネントクラスで

@ViewChildren('someVar') elements;

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

typescript - angular2でjsで追加された要素をviewChildが取得するにはどうすればよいですか?

解決 ：

1 に答える 1

Related

Reference

解決：