如何在Angular2中查找DOM元素的子元素和父元素

发布时间：2020-12-17 07:25:08 所属栏目：安全来源：网络整理

导读：我知道我可以获取组件的DOM元素 constructor(el: ElementRef){} 但是我如何访问其子女(例如通过按类或ID搜索)和主持人？ el.nativeElement.childrenel.nativeElement.parentel.nativeElement.host 一切都行不通. 我一直在寻找答案,没有运气.非常感谢您的帮助

我知道我可以获取组件的DOM元素

constructor(el: ElementRef){}

但是我如何访问其子女(例如通过按类或ID搜索)和主持人？

el.nativeElement.children
el.nativeElement.parent
el.nativeElement.host

一切都行不通.

我一直在寻找答案,没有运气.非常感谢您的帮助.

编辑感谢yurzui的评论,我意识到el.nativeElement.children在组件的视图初始化后工作.但是我仍然无法访问主机元素.

另外,正如JB Nizet指出的那样,在Angular2中操作DOM元素是不公平的.但是,我在组件类中需要的DOM元素的唯一内容是元素的宽度.如果我知道如何将此值绑定到类属性,我会在不访问DOM的情况下解决问题.我之前尝试过类似的东西

<div [width] = "style.width"></div>

(width是我的组件类的属性,其视图包含上面的div)但我无法使其工作.

尝试在ngAfterViewInit事件中使用您的代码.

并且您需要使用parentNode属性而不是parent

export class App {
  el: ElementRef;
  constructor(el: ElementRef){
    this.el = el; 
  },ngAfterViewInit() {
    const hostElem = this.el.nativeElement;
    console.log(hostElem.children);
    console.log(hostElem.parentNode);
  }
}

https://plnkr.co/edit/iTmsNaIoU9NNUEFRe4kG?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!