Angular2：我怎樣纔能有一個父組件告訴孩子什麼大小？

Question

我的角度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

你可以跳過只有CSS屬性和樣式的樣式。每個家長可以通過設置共同的孩子風格：

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

Answer 2

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

此外，@Input屬性具有默認值也很好。