Question

我正在尝试在两个组件之间传递数据。但我得到一个错误这是子组件，

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


@Component({
    selector: '[app-bar-chart]',
    templateUrl: './bar-chart.component.html',
    styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {
    @Input() chartData: {
        title: string,
        content: {
            label: string,
            value: number,
            fill?: string
        }[]
    }[];

    constructor() { }

    ngOnInit() {
        alert(this.title);
    }    


}

这是父组件

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

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

    ngOnInit() {
    }

}

我正在使用@Input装饰器进行组件间通信。当我运行应用程序时显示错误

Error: Template parse errors:
Can't bind to 'chartData' since it isn't a known property of 'div'

请注意，这两个组件位于单独的模块中，我正在使用延迟加载。为什么会这样？请帮忙。谢谢。

Answer 1

您的代码存在的问题是app-bar-chart应该是这样的

标签

 <div class="graph-image" style="width: 100%; height: 400px;">
<app-bar-chart [chartData]="barChartData"></app-bar-chart>
</div>`

此外，请移除应用栏图表中的[title]，因为您只声明chartData作为输入。

如果您懒惰加载模块，那么只需使用共享模块并在那里声明BarChartComponent。使用延迟加载属于不同模块的两个组件是行不通的，因为他们彼此不认识。

希望这有帮助

Answer 2

只需声明属性，而不是指定所有值。将值从Parent传递给Child时，所有值都将被chartData

替换

export class BarChartComponent implements OnInit {
    @Input() chartData:any;

    constructor() { }

    ngOnInit() {
        alert(this.title);
    }    


}

您也不能将组件用作属性指令

Answer 3

您的选择器应该在没有括号的情况下使用：

selector: 'app-bar-chart'

Answer 4

您必须在父组件中将chartData定义为@Output。

组件间通信在Angular 4中不起作用

4 个答案: