typescript – viewChild如何获取在angular2中添加了js的元素?
如果已将一个
HTML元素添加到DOM中(例如在单击按钮后),我们如何访问此元素? viewChild看不到.
更新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) } } 请注意,有时需要几秒钟的延迟才能确保创建所有新元素. 解决方法
如果你动态添加HTML(比如[innerHTML] =“someHtml”),那么你可以通过注入ElementRef并使用ElementRef.nativeElement.querySelector来使用直接DOM访问(在Angular2中不赞成)…
如果使用* ngFor生成HTML,则可以添加模板变量并查询这些元素 <div *ngFor="let x of y" #someVar></div> 然后在组件类中 @ViewChildren('someVar') elements; ngAfterViewInit() { console.log(this.elements); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |