首页 文章

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

提问于
浏览
4

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

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

1 回答

  • 2

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

    你必须使用 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 .

相关问题