javascript - Angular 2 : How can I have a parent component tell a child what size to be?

Question

我正在使用 Angular 2。我有一个组件 - 弦图 - 我想根据它所包含的父组件以不同的尺寸显示。

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

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

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

chord-graph.component.ts:

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

chord-graph.component.html:

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

detail-view.component.ts:

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

detail-view.component.html:

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

仪表板 View .component.ts:

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

dashboard-view.component.html:

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

当前会引发 TypeError: Cannot read property 'height' of undefined at CompiledTemplate.proxyViewClass.View_ChordGraphComponent0.detectChangesInteral。如果我将高度/宽度设置为 cord-graph.component.html 中的某个数字，则页面会加载该尺寸的元素。

Answer 1

您可能可以跳过使用属性的样式，而仅使用 css 的样式。每个父级都可以通过以下方式设置公共(public)子级样式:

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