Angular2：由路由器動態插入的樣式組件

爲此搜索了一個答案，並且看到人們正在爲此而苦苦掙扎，但沒有直接答案，尤其是關於已發佈的2.x版本的Angular。Angular2：由路由器動態插入的樣式組件

假設你有app.component.html用下面的代碼：

<div> 
    <router-outlet></router-outlet> 
</div>

路由器動態地插入你的自定義組件，說my-component和（奇怪）該組成部分場所作爲router-outlet元素，像這樣一個兄弟：

<div> 
    <router-outlet></router-outlet> 
    <my-component></my-component> 
</div>

顯然，路由器可以在其中放置另一個組件，因此在app.component.css文件中創建樣式時，不能依賴名稱my-component。

那麼......你如何做到這一點？

爲什麼這很重要？爲什麼不直接在my-component CSS中設置:host的樣式？那麼，因爲並非所有的風格都屬於那裏。例如，如果app.component決定它是一個彈性容器（即，display: flex;），那將意味着該my-component元素應該被設計爲彈性項目（即，flex: 1 0 0;）。將柔性項目樣式放置在my-component的內部似乎是一種不好的做法，因爲您將它與其父組件的樣式相結合。

編鐘如果你知道答案。

謝謝！

來源

2016-12-01 user1902183

我試過類似的東西沒有運氣，最接近的解決方案是讓父母將必要的數據推送到服務並讓孩子觀察它來更新它的主機數據。顯然不理想，但據我所知，無法通過路由器插座將數據從父級傳遞到子組件。 –

我還沒有試過，但我想相鄰兄弟選擇應該允許你這樣做

:host div + * { 
    display: flex; 
}

來源

2016-12-01 05:47:53

將這個CSS放到app.component中會有：host指向應用組件的主機，而不是'my-component'。把它放在'my-component'裏面是沒有意義的。不確定你在這裏的意思。 – user1902183

的關鍵是/deep/關鍵字：

風格將適用於任何元素後跟路由器插座。

或使其具體到不同樣式應用到已知組件。

:host /deep/ router-outlet + my-component { 
    display: block; 
    border: 10px solid black; 
} 

:host /deep/ router-outlet + my-component2 { 
    display: block; 
    border: 10px solid red; 
}

來源

2017-04-21 08:40:46 Val

Angular2：由路由器動態插入的樣式組件

回答

相關問題