Question

我知道我可以使用

获取组件的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）但我无法使其工作。

Answer 1

Try to use your code in ngAfterViewInit event.

And you need to use parentNode property instead 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

Answer 2

由于this.el.nativeElement.children返回子节点数组，你可以简单地执行此操作.el.nativeElement.children [0]。

import { Component, AfterViewInit,  ElementRef } from '@angular/core'; 

export class MyComponent implements ngAfterViewInit {
  el: ElementRef;

  constructor(el: ElementRef){
    this.el = el; 
  }

  ngAfterViewInit() {
     console.log(this.el.nativeElement.children[0]);
     console.log(this.el.nativeElement.children[0].offsetHeight);
  }
}

如何在Angular2

2 个答案: