如何在Angular4中访问Component的nativeElement？

Question

我有两个组件,一个有属性选择器.子组件是,

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() {
    }

}

我将本地引用从父组件传递给子组件.当我安慰这个本地引用的本机元素时,它是'undefined'.如何访问本机元素,以便可以访问组件div的样式宽度和高度.

Answer 1

如果需要ElementRef组件,则不能使用模板变量.如果元素是一个组件,那么您将获得组件实例.模板变量仅返回ElementRef纯HTML元素.

要获得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的例子

Answer 2

问题是,如果您在Angular视图作为组件的主机元素的元素上定义模板引用,您将获得对组件实例的引用.这里:

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

chartContainer将指向该实例,这就是未定义的BarChartComponent原因nativeElement.

要获取elementRefhost元素,您不需要任何绑定或生命周期钩子,只需将元素注入构造函数:

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

Answer 3

正如其他人所说，当您尝试使用属性引用组件时，您会获得组件的引用@ViewChild('templateId') element;。但这完全没问题，因为我们可以在其构造函数中引用子组件的 nativeElement 并使其可从外部组件公开使用：

  // Child component
  nativeElement: HTMLElement;

  constructor(element: ElementRef) {
    this.nativeElement = element.nativeElement;
  }

  // Parent component:
 
  @ViewChild('childId') element; // element.nativeElement works now