如何在Angular4中访问组件的nativeElement? [英] How to access the nativeElement of a Component in Angular4?

问题描述

我有两个组成部分，一个带有属性选择器.子组件是

I have two components and one with attribute selector. The child component is,

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的样式宽度和高度.

I am passing the local reference from the parent component to the child component. When I am consoling the native element of this local reference it is 'undefined'. How can I access the native element so that I can access the style width and height of the component div.

推荐答案

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

The problem is that if you define a template reference on the element that Angular views as a host element of the component, you will get a reference to the component instance. Here:

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

chartContainer将指向BarChartComponent的实例，这就是为什么nativeElement未定义的原因.

chartContainer will point to the instance of the BarChartComponent and that is why nativeElement is undefined.

要获取host元素的elementRef，不需要任何绑定或生命周期挂钩，只需将元素注入构造函数中即可:

To get elementRef of the host element, you don't need any bindings or lifecycle hooks, just inject the element into the constructor:

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

这篇关于如何在Angular4中访问组件的nativeElement?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！