无法捕获自定义角度组件的nativeElement

Question

我无法获取自定义元素的nativeElement的引用。我有这样的模板：

<div #testone>
<my-feature-cmp><my-feature-cmp>
<my-feature-cmp><my-feature-cmp>
<my-feature-cmp><my-feature-cmp>
<div>

用于访问的代码： @ViewChild（＆＃39; testone＆＃39;）el：ElementRef;

当我这样做时，我得到了元素引用 - ＆gt;的console.log（this.el.nativeElement）

第二种模板

<my-feature-cmp></my-feature-cmp>
<my-feature-cmp></my-feature-cmp>
<my-feature-cmp></my-feature-cmp>

用于访问的代码：

@ViewChildren(MyFeatureCmp) el: MyFeatureCmp;

当我这样做时，我得到了本机元素的错误 - ＆gt;

console.log(this.el.nativeElement)

当我这样做时，我得到类引用而没有nativeElement - ＆GT;

console.log(this.el)
console.log(this.el.toArray())

问题是如果我想更改标记属性，如何访问自定义组件的本机元素。其次，无论我访问它们的方式如何，如果我手动更改自定义组件的属性，它会在更改后被检测为更改吗？

Answer 1

  

问题是如何访问自定义组件的本机元素

您必须使用read选项：

@ViewChildren(MyFeatureCmp, {read: ElementRef}) el: QueryList<ElementRef>;

console.log(this.el.first.nativeElement)

另请参阅this answer了解我们可以使用read获得的内容。

  

如果我手动更改自定义组件的属性，它将获得   在变化之后检测到变化？

不，Angular不处理DOM元素的更改。有关更改检测过程的详细信息，请参阅Everything you need to know about change detection in Angular。