CSS Angular 2：如何为组件的宿主元素设置样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32853924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2: How to style host element of the component?
提问by Ravi Teja Gudapati
I have component in Angular 2 called my-comp:
我在 Angular 2 中有一个名为 my-comp 的组件：
<my-comp></my-comp>
How does one style the host element of this component in Angular 2?
如何在 Angular 2 中设置此组件的宿主元素的样式？
In Polymer, You would use ":host" selector. I tried it in Angular 2. But it doesn't work.
在 Polymer 中，您将使用 ":host" 选择器。我在 Angular 2 中尝试过。但它不起作用。
:host {
display: block;
width: 100%;
height: 100%;
}
I also tried using the component as selector:
我也尝试使用组件作为选择器：
my-comp {
display: block;
width: 100%;
height: 100%;
}
Both approaches don't seem to work.
这两种方法似乎都不起作用。
Thanks.
谢谢。
回答by Günter Z?chbauer
There was a bug, but it was fixed in the meantime. :host { }works fine now.
有一个错误，但在此期间已修复。:host { }现在工作正常。
Also supported are
还支持
:host(selector) { ... }forselectorto match attributes, classes, ... on the host element:host-context(selector) { ... }forselectorto match elements, classes, ...on parent componentsselector /deep/ selector(aliasselector >>> selectordoesn't work with SASS) for styles to match across element boundariesUPDATE:SASS is deprecating
/deep/.
Angular (TS and Dart) added::ng-deepas a replacement that's also compatible with SASS.UPDATE2:
::slotted::slottedis now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
:host(selector) { ... }用于selector匹配宿主元素上的属性、类...:host-context(selector) { ... }用于selector匹配元素，类，......在父组件上selector /deep/ selector（别名selector >>> selector不适用于 SASS）用于跨元素边界匹配的样式更新：SASS 正在弃用
/deep/.
添加了 Angular（TS 和 Dart）::ng-deep作为与 SASS 兼容的替代品。UPDATE2：
::slotted::slotted现在所有新浏览器都支持，可以与`ViewEncapsulation.ShadowDom https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted一起使用
See also Load external css style into Angular 2 Component
另请参阅将外部 css 样式加载到 Angular 2 组件中
/deep/and >>>are not affectedby the same selector combinators that in Chrome which are deprecated.
Angular emulates (rewrites) them, and therefore doesn't depend on browsers supporting them.
/deep/而>>>在不影响通过在Chrome中被弱化了相同的选择组合程序。
Angular 模拟（重写）它们，因此不依赖于支持它们的浏览器。
This is also why /deep/and >>>don't work with ViewEncapsulation.Nativewhich enables native shadow DOM and depends on browser support.
这也是为什么/deep/并且>>>不使用ViewEncapsulation.Native它启用本机 shadow DOM 并取决于浏览器支持的原因。
回答by prespic
I have found a solution how to style just the component element. I have not found any documentation how it works, but you can put attributes values into the component directive, under the 'host' property like this:
我找到了一个解决方案，即如何仅设置组件元素的样式。我还没有找到它是如何工作的任何文档，但是您可以将属性值放入组件指令中，在 'host' 属性下，如下所示：
@Component({
...
styles: [`
:host {
'style': 'display: table; height: 100%',
'class': 'myClass'
}`
})
export class MyComponent
{
constructor() {}
// Also you can use @HostBinding decorator
@HostBinding('style.background-color') public color: string = 'lime';
@HostBinding('class.highlighted') public highlighted: boolean = true;
}
UPDATE: As Günter Z?chbauer mentioned, there was a bug, and now you can style the host element even in css file, like this:
更新：正如 Günter Z?chbauer 所提到的，存在一个错误，现在您甚至可以在 css 文件中设置宿主元素的样式，如下所示：
:host{ ... }
回答by alexpods
Check out this issue. I think the bug will be resolved when new template precompilation logicwill be implemented. For now I think the best you can do is to wrap your template into <div class="root">and style this div:
看看这个问题。我认为当实现新的模板预编译逻辑时，该错误将得到解决。现在我认为你能做的最好的事情就是将你的模板包装成<div class="root">这样div：
@Component({ ... })
@View({
template: `
<div class="root">
<h2>Hello Angular2!</h2>
<p>here is your template</p>
</div>
`,
styles: [`
.root {
background: blue;
}
`],
...
})
class SomeComponent {}
See this plunker
回答by Xquick
In your Component you can add .class to your host element if you would have some general styles that you want to apply.
在您的组件中，如果您有一些想要应用的通用样式，您可以将 .class 添加到您的宿主元素中。
export class MyComponent{
@HostBinding('class') classes = 'classA classB';
回答by Petros Kyriakou
For anyone looking to style child elements of a :hosthere is an example of how to use ::ng-deep
对于任何想要设计 a 的子元素样式的人来说，:host这里是一个如何使用的示例::ng-deep
:host::ng-deep <child element>
:host::ng-deep <child element>
e.g :host::ng-deep span { color: red; }
例如 :host::ng-deep span { color: red; }
As others said /deep/is deprecated
正如其他人所说的/deep/已弃用
回答by abahet
Try the :host > /deep/ :
试试 :host > /deep/ ：
Add the following to the parent.component.less file
将以下内容添加到 parent.component.less 文件中
:host {
/deep/ app-child-component {
//your child style
}
}
Replace the app-child-component by your child selector
用你的子选择器替换 app-child-component
