带参数的角度SASS选择器

Question

阅读此Angular SASS代码：

:host {
display: flex;
flex-wrap: wrap;
}
:host(.column) {
flex-direction: column;
margin-top: 1rem;
margin-bottom: 2rem;
}

:host(.column)选择器选择什么。当它附加了一个column类时，它是宿主元素吗？我们通常应该这样解释括号中传递的论点吗？

Answer 1

你的结论是正确的。:host()内的选择器必须与:host相匹配才能应用CSS。根据Angular Component Styling文档：

使用函数形式通过在:host后的括号内包含另一个选择器来有条件地应用主机样式

在本例中，当activeCSS类应用于宿主元素时，宿主的内容也变为粗体。

:host {
font-style: italic;
}
:host(.active) {
font-weight: bold;
}