如何在 Angular4 中访问组件的 nativeElement？答案

【问题标题】：How to access the nativeElement of a Component in Angular4?如何在 Angular4 中访问组件的 nativeElement？
【发布时间】：2018-01-02 18:30:39
【问题描述】：

我有两个组件，一个带有属性选择器。子组件是，

import { Component, OnInit, Input, ElementRef } from '@angular/core';


@Component({
    selector: '[app-bar-chart]',
    templateUrl: './bar-chart.component.html',
    styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {

    @Input() chartContainer: ElementRef;
    @Input() title: string;
    @Input() chartData: {
        title: string,
        content: {
            label: string,
            value: number,
            fill?: string
        }[]
    }[];

    constructor() { }

    ngOnInit() {
        console.log(this.chartContainer);
        console.log(this.chartContainer.nativeElement);
    }

}

父组件是，

import { Component, OnInit, Output, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'app-dashboard',
    template: `<div><div class="graph-image" style="width: 100%; height: 400px;" app-bar-chart [title]="barChartTitle" [chartData]="ChartData" [chartContainer]="chartContainer" #chartContainer></div></div>`,
    styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
    barChartTitle = 'Transaction History';
    ChartData = [
        {
            "title": "May2017",
            "content": [
                {
                    "label": "payable",
                    "value": 10
                }
            ]
        },
        {
            "title": "Jun2017",
            "content": [
                {
                    "label": "payable",
                    "value": 120
                }
            ]
        }
    ];
    constructor() { }

    ngOnInit() {
    }

}

我将本地引用从父组件传递给子组件。当我安慰这个本地引用的本机元素时，它是“未定义的”。如何访问原生元素，以便访问组件 div 的样式宽度和高度。

【问题讨论】：

标签： angular

【解决方案1】：

问题在于，如果您在 Angular 将其视为组件的宿主元素的元素上定义模板引用，您将获得对组件实例的引用。这里：

<... chartContainer]="chartContainer" #chartContainer></div>

chartContainer 将指向BarChartComponent 的实例，这就是nativeElement 未定义的原因。

要获取宿主元素的elementRef，不需要任何绑定或生命周期钩子，只需将元素注入构造函数即可：

export class BarChartComponent implements OnInit {
   constructor(element: ElementRef) {
        console.log(element.nativeElement);
   }

【讨论】：

在父母等待其孩子的情况下，ngAfterViewInit 是正确的。但是，当孩子收到父母 ngOnInit 应该没问题。没事吧？
@kimy82，我误解了这个问题。我更新了答案
这特别有用，因为它允许我从单个 @ViewChildren 查询访问组件实例和本机 ElementRef。

【解决方案2】：

在您设置的第一个选择器中 '[app-bar-chart]' 应该没有方括号。要传递父母，您应该使用：

 [chartContainer]="this"

代替：

 [chartContainer]="chartContainer"

【讨论】：

【解决方案3】：

如果需要组件的ElementRef，则不能使用模板变量。如果元素是组件，您将获得组件实例。模板变量只为纯 HTML 元素返回 ElementRef。

要获取组件的ElementRef，需要使用@ViewChild()

@ViewChild('chartContainer', { read: ElementRef }) myChartContainer:ElementRef;

然后一起传递

[chartContainer]="myChartContainer"

我会将输入设为 setter

 private _chartContainer:ElementRef;
 @Input() 
 set chartContainer(value: ElementRef) {
   this._chartContainer = value;
   console.log(this.chartContainer);
   console.log(this.chartContainer.nativeElement);
 }

但是ngOnInit 也可以工作Plunker example

【讨论】：

有什么问题？
假设这不是我第一次将 f(x) 与（可以说）相同的 x 应用并得到 y1 和 y2 其中 y1 != y2 太多次.. ^^ Grüße aus Graz。
（ElementRef 值）不应该是（值：ElementRef）吗？
@reika 感谢您的提示。你说的对。我把它和 Dart 混在一起了 ;-)
使用 {read: ElementRef} 就像一个魅力。非常感谢。