應用組件模板Angular2

我有一個簡單的組件，使用模板是這樣的：應用組件模板Angular2

<span style="display:inline-block;" #control>Content here</span>

然後，在調用點我擺弄造型：

<my-comp style="width:300px;"></my-comp>

...這完全沒有成就。在運行時，上述轉換爲：

<my-comp style="width:300px;" class="ng-untouched ng-pristine ng-valid"> 
    <span style="display:inline-block;" #control>Content here</span> 
</my-comp>

很棒。在<my-comp>上，寬度被忽略，並且在我想要的<span>上，它不會被應用。

我知道我可以將寬度作爲我的組件的一個屬性，然後將其應用於模板中，但是我的問題比這更廣泛：如果我不想對正在應用的樣式進行規定，該怎麼辦？有沒有辦法讓來自呼叫站點的屬性自動應用到模板的外部元素？

來源

2016-12-07 Cobus Kruger

請您用簡單的話你想要什麼解釋？ – micronyks

你可以試一下''。如果它不起作用，請提供一個Plunker。我不認爲這是與Angular2相關，而是一個普通的CSS問題。 –

@micronyks這些是我簡單的話:)你發現什麼不清楚？ –

定製組件呈現爲在瀏覽器中，這意味着不能在寬度添加到它，除非改變它的定位（absolute/fixed）爲inline或改變顯示（block/inline-block/flex/inline-flex ）。

因此，要麼改變風格的行內（皺眉），或添加CSS規則，以你的組件：

@Component({ 
    selector : 'my-comp', 
    template : `...`, 
    styles : [`:host{display: inline-block}`] 
}) 
export class MyCompComponent {}

來源

2016-12-07 09:00:16 PierreDuc

應用組件模板Angular2

回答

相關問題