javascript - 无法为自定义角度组件捕获 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('testone') el: ElementRef;

执行此操作时，我得到了元素引用-> 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;

执行此操作时，我收到本机元素的错误 ->

console.log(this.el.nativeElement)

当我这样做时，我得到了类引用并且没有 nativeElement ->

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

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

score 7 · Accepted Answer

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

您必须使用read选项：

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

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

另请参阅此答案以了解我们可以使用的内容read。

如果我手动更改自定义组件的属性，它是否会在更改后被检测为更改？

不，Angular 不处理 DOM 元素的更改。有关更改检测过程的更多信息，请参阅有关 Angular 中更改检测的所有信息。

1 回答 1