我看到它的方式，它可以用作容器的替代品，用於爲組件設計樣式。例如：使用：主機選擇器vs容器div

使用容器

@Component({ 
    template: ` 
     <div class="container"> 
      <h1>Some Title</h1> 
      <p>Some Content</h1> 
     </div> 
    `, 
    styles: [` 
     .container { 
      border: 1px solid black; 
      display: flex; 
     } 
    `], 
})

使用:host

@Component({ 
    template: ` 
     <h1>Some Title</h1> 
     <p>Some Content</h1> 
    `, 
    styles: [` 
     :host { 
      border: 1px solid black; 
      display: flex; 
     } 
    `], 
})

如果我理解正確的，這兩種解決相同問題。很少有一個元素和類可以在幾乎每一個組件中擔心。

問題：這是:host的目的？如果不是，它的意義是什麼，除了向所有地方添加容器之外，給組件添加樣式的最佳實踐是什麼？

來源

2017-09-27 Frigo

你說得對。：可以使用主機將任何樣式應用於當前組件。您也可以使用包裝器併爲其編寫樣式。所以這只是一個偏好問題，並基於您的要求。如果它只是一個包裝，那麼你可以直接去'：host'。 –

@KiranDash這不是一個偏好問題，主機上的設置樣式可以定義組件默認的'display'屬性，默認爲'inline'，並且將塊元素放在行內不會產生任何意義。 – n00dl3

他們不解決同樣的問題。 :host用於對主機進行造型，而.container用於對組件中具有container類的任何div進行造型。

.container div由於封裝而無法用於組件外部的樣式，而宿主元素可以樣式化。

請注意，display屬性的初始值爲inline，因此默認情況下，您的組件將顯示爲inline元素。也許你不想要那樣，尤其是if you have a block element inside of it，這可能看起來不符合直覺（即使它允許）。

來源

2017-09-27 13:05:04 n00dl3

非常好的答案，尤其是'display：block'部分。 –

我想他們不是等價的，但他們肯定會解決我的例子中的相同問題（我假設只有一個'.container'實例包裝了我的模板中的所有其他內容）？不過關於'display'的好處！這絕對是我沒有考慮過的一個副作用。還有@AdrianMoisa提到的封裝。我仍然不確定'：host'選擇器的要點是什麼，如果不是用於樣式化否則會進入'.container' /'.wrapper' /'my-component-name'/＃whatever'。 – Frigo

您不能從組件外部設置'.container'（除了使用deprecated'/ deep /'選擇器）。儘管你可以設置主機元素的樣式。因此，設置主機元素的樣式可以讓您在組件上放置默認樣式。 – n00dl3

:host正在爲當前組件（例如<app-header>元素）設計您的包裝元素，並且據我所知，這是對這樣的元素進行樣式設置的簡短方法。

來源

2017-09-27 12:59:25

我也將添加以下意見，以目前的答案：

類.container

如果使用.container比你要始終保持同步在你的願望案例類重命名你的組件。在大型應用程序中，這往往會在開發的早期階段發生。
此外，如果您沒有良好的CSS衛生習慣，這會讓您打開名稱衝突的名單。
它可以通過覆蓋元素類屬性在運行時被錯誤地刪除。使用element.classList.add(); .remove()

：主機

備件你需要大量的輸入（有時部件名稱可以得到長）
正是在那裏，無論你添加的元素是什麼類。我相信它也必須優先於.container類。
（僅適用於Angular）Angular模擬相同的行爲，但是如果禁用組件封裝，所有:host選擇器變得無用，這可能會導致使用.container類。

來源

2017-09-28 21:00:04

使用：主機選擇器vs容器div

使用容器

使用:host

回答

相關問題