我有两个组件,其中一个带有属性 Select 器.子组件是,

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

}

我将本地引用从父组件传递给子组件.当我安慰这个本地引用的原生元素时,它是"未定义的".如何访问native-element 才能访问组件div的样式、宽度和高度.

推荐答案

问题是,如果在Angular 视图为构件主体图元的图元上定义样板参照,则会获得对构件实例的参照.这里:

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

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

要获得elementRef个宿主元素,不需要任何绑定或生命周期挂钩,只需将元素注入构造函数:

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

Angular相关问答推荐

根据Angular中的构建来卸载独立组件

导致无限请求的Angular HttpInterceptor和HttpClientModule

命令不起作用的初始菜单项

Sass-Loader中出现分号错误:ANGLE应用程序的缩进语法中不允许使用分号

更改动态表单控制Angular 的值

MAT-复选框更改事件未在onSubscriberCheck函数中返回选中的值

获取 Angular 中所有子集合 firestore 的列表

如何处理后端删除元素后元素列表的刷新

如何将模块导入独立指令

执行ng generate environments时出错时需要合集和原理图

PrimeNG:如何以编程方式更改分页器中的选定页面?

在 kubernetes 上创建 Ingress 服务以将 springboot [后端] 连接到前端 [angular]

等待两个订阅完成而不嵌套

Angular 13 - 何时创建嵌入式视图?

在一个组件中创建多个表单

为什么 Angular2 (click) 事件没有在

react形式的formGroup.get与formGroup.controls

读取文件并解析其内容

单元测试错误:无法从同步测试中调用 Promise.then

此类通过 SomeModule -> SomeComponent 对消费者可见,但不会从顶级库入口点导出