最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Unable to capture nativeElement for custom angular components - Stack Overflow

programmeradmin5浏览0评论

I am unable to get the reference of nativeElement of my custom Elements. I have a template like this:

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

Code used to access: @ViewChild('testone') el: ElementRef;

I get the element reference when I do this -> console.log(this.el.nativeElement)

Second type of template

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

Code used to access:

@ViewChildren(MyFeatureCmp) el: MyFeatureCmp;

I get the error for native element when I do this ->

console.log(this.el.nativeElement)

I get the class references and no nativeElement when I do this ->

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

The question is how to I access the native element of custom ponent if I want to make changes to the tag attributes. Second, whatever way I access them, If I change the attributes manually for custom ponent will it get detected as a change as well after the change?

I am unable to get the reference of nativeElement of my custom Elements. I have a template like this:

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

Code used to access: @ViewChild('testone') el: ElementRef;

I get the element reference when I do this -> console.log(this.el.nativeElement)

Second type of template

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

Code used to access:

@ViewChildren(MyFeatureCmp) el: MyFeatureCmp;

I get the error for native element when I do this ->

console.log(this.el.nativeElement)

I get the class references and no nativeElement when I do this ->

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

The question is how to I access the native element of custom ponent if I want to make changes to the tag attributes. Second, whatever way I access them, If I change the attributes manually for custom ponent will it get detected as a change as well after the change?

Share Improve this question asked Jul 13, 2017 at 4:54 GaryGary 2,3392 gold badges30 silver badges53 bronze badges 3
  • If I change the attributes manually - what exactly do you change and what do you want framework to pick up? – Max Koretskyi Commented Jul 13, 2017 at 4:58
  • 2 See stackoverflow./questions/39908967/… and stackoverflow./questions/45064576/… – yurzui Commented Jul 13, 2017 at 4:58
  • what exactly do you change. 1) If I access the ponent class instance's objects say a variable within it will it be change detected automatically? 2) If I get the cmp element ref of <my-feature-cmp> then can I do this within breaking something somewhere? this.el.first.nativeElement.someatrribute = 'somevalue' or this.el.first.nativeElement.style.color = '#ccc' or add event listeners (somecustomevent) on fly? – Gary Commented Jul 13, 2017 at 6:04
Add a ment  | 

1 Answer 1

Reset to default 10

The question is how to I access the native element of custom ponent

You have to use read option:

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

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

Also see this answer to learn what we can get using read.

If I change the attributes manually for custom ponent will it get detected as a change as well after the change?

No, Angular doesn't process changes on DOM elements. For more information on what change detection processes see Everything you need to know about change detection in Angular.

发布评论

评论列表(0)

  1. 暂无评论