Cách truy cập nativeElement của một Component trong Angular4?

Question

Tôi có hai thành phần và một với bộ chọn thuộc tính. Các thành phần con là,

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); 
    } 

} 

thành phần cha mẹ là,

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

} 

Tôi đi qua các tài liệu tham khảo địa phương từ thành phần cha mẹ để các thành phần con. Khi tôi an ủi phần tử gốc của tham chiếu cục bộ này, nó là 'không xác định'. Làm thế nào tôi có thể truy cập vào phần tử gốc để tôi có thể truy cập chiều rộng và chiều cao kiểu của div thành phần.

Answer 1

Vấn đề là nếu bạn xác định một tham chiếu mẫu trên phần tử mà góc nhìn như một phần tử máy chủ của thành phần, bạn sẽ nhận được một tham chiếu đến cá thể thành phần. Ở đây:

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

chartContainer sẽ trỏ đến trường hợp của các BarChartComponent và đó là lý do tại sao nativeElement là undefined.

Để có được elementRef của phần tử chủ, bạn không cần bất kỳ ràng buộc hay móc vòng đời, chỉ cần tiêm nguyên tố này vào constructor:

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

Answer 2

Trong bộ chọn đầu tiên mà bạn đã thiết lập '[cấp ứng dụng biểu đồ thanh] ' và không nên có các nút hình vuông. Để vượt qua các phụ huynh, bạn nên sử dụng:

[chartContainer]="this" 

thay vì:

[chartContainer]="chartContainer" 

Answer 3

Nếu bạn cần ElementRef của một thành phần, bạn không thể sử dụng một biến mẫu. Nếu phần tử là một thành phần, bạn sẽ nhận được cá thể thành phần thay thế. Biến mẫu chỉ trả lại ElementRef cho các phần tử HTML thuần túy.

Để có được ElementRef của một thành phần, bạn cần phải sử dụng @ViewChild()

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

và sau đó vượt qua nó cùng với

[chartContainer]="myChartContainer" 

tôi sẽ làm cho đầu vào một setter

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

nhưng ngOnInit cũng hoạt động như Plunker example