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

Posted 2023-03-13

【中文标题】无法为自定义角度组件捕获 nativeElement

【英文标题】：Unable to capture nativeElement for custom angular components

【发布时间】：2017-12-17 16:59:31

【问题描述】：

我无法获取自定义元素的 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())

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

【问题讨论】：

如果我手动更改属性 - 你到底改变了什么，你希望框架选择什么？

见***.com/questions/39908967/…和***.com/questions/45064576/…

what exactly do you change。 1）如果我访问组件类实例的对象说其中的变量会自动检测到变化吗？ 2）如果我得到<my-feature-cmp> 的 cmp 元素引用，那么我可以在某处破坏某些东西的情况下做到这一点吗？ this.el.first.nativeElement.someatrribute = 'somevalue' 或 this.el.first.nativeElement.style.color = '#ccc' 或添加事件侦听器 (somecustomevent) 即时？

【参考方案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。

【讨论】：

让它工作。因此，如果我要访问第 N 个元素，我将不得不执行 .toArray() 并正确获取该特定元素？

好酷。 what exactly do you change。 1）如果我访问组件类实例的对象说其中的变量会自动检测到变化吗？ 2）如果我得到<my-feature-cmp> 的 cmp 元素引用，那么我可以在某处破坏某些东西吗？ this.el.first.nativeElement.someatrribute = 'somevalue' 或 this.el.first.nativeElement.style.color = '#ccc' 或添加类似 (somecustomevent) 这样的事件监听器？

我记得我们讨论了很久here，现在还不清楚CD 是做什么的吗？如果您更改组件实例属性并且它在模板中使用，是的，Angular 会接受更改。如果你通过原生元素修改 DOM，不会，不会检测到变化。