Question

我在Angular 2工作。我有一个组件 - 和弦图 - 我希望以各种大小显示，具体取决于它包含在哪个父组件中。

我有一个细节显示，我希望弦图组件为高度：500px和宽度：700px。

我有一个仪表板显示，我希望弦图组件的高度为：200px和宽度：300px。

我试图通过使用@Input将尺寸传递到弦图来实现这一目的。

弦graph.component.ts：

export class ChordGraphComponent {
    @Input() dimensions: {height: number, width: number};
}

弦graph.component.html：

<div #container [ngStyle]="{ 'height.px': dimensions.height, 'width.px': dimensions.width }"></div>

细节view.component.ts：

export class DetailViewComponent {
    dimensions: { height: number, width: number} = {height: 500, width: 700};
}

细节view.component.html：

<chord-graph [dimensions]=dimensions></chord-graph>

仪表板view.component.ts：

export class DashboardViewComponent {
    dimensions: { height: number, width: number} = {height: 200, width: 300};
}

仪表板view.component.html：

<chord-graph [dimensions]=dimensions></chord-graph>

目前这会引发TypeError: Cannot read property 'height' of undefined at CompiledTemplate.proxyViewClass.View_ChordGraphComponent0.detectChangesInteral。如果我在chord-graph.component.html中将高度/宽度设置为一个数字，那么页面将加载该大小的元素。

Answer 1

是的，<div #container [ngStyle]="{ 'height.px': dimensions?.height, 'width.px': dimensions?.width }"></div>表达式运算符（https://angular.io/guide/template-syntax#expression-operators）应该有所帮助。

为@Input属性设置默认值也很好。

Answer 2

您可以使用css跳过属性和样式的样式。每个父母都可以通过以下方式设置公共子样式：

 :host ::ng-deep chord-graph{
   width: 200px;
   height: 100px;
 }

Angular2：我怎样才能让父组件告诉孩子大小是多少？

2 个答案: