Angular 2:如何为组件的宿主元素设置样式?

我在Angular 2中有一个名为my-comp的组件:

<my-comp></my-comp>

在Angular 2中如何为这个组件的宿主元素设置样式?

在Polymer中，您将使用“:host”选择器。我在Angular 2中尝试过。但这并不奏效。

:host {
display: block;
width: 100%;
height: 100%;
}

我还尝试使用组件作为选择器:

my-comp {
display: block;
width: 100%;
height: 100%;
}

这两种方法似乎都不管用。

谢谢。

182808 次浏览
小开

看看这个问题。我认为当新的模板预编译逻辑将被实现时，这个错误将被解决。现在，我认为你能做的最好的事情是将你的模板包装到<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 {}

看到这恰好

小开

我已经找到了一个解决方案如何样式只是组件元素。我没有找到它是如何工作的任何文档，但你可以把属性值放在组件指令中，在'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;
}
< p >更新: 正如Günter Zöchbauer提到的，有一个错误，现在你可以在css文件中设置主机元素的样式，就像这样:

:host{ ... }
小开
最佳答案

有个漏洞，但同时已经修复了。:host { }现在工作正常。

支持的还有

  • :host(selector) { ... } for selector来匹配属性、类、…在宿主元素上

  • :host-context(selector) { ... } for selector来匹配元素、类、…关于父组件

  • < p > __ABC0(别名selector >>> selector不适用于SASS)用于跨元素边界匹配样式

    • 更新: SASS正在弃用/deep/ Angular (TS和Dart)添加了::ng-deep作为替换，它也兼容SASS <李> < p > 更新2: ::slotted ::slotted现在被所有新浏览器支持，并且可以与' ViewEncapsulation '一起使用。ShadowDom < br > 李https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted < / p > < / > 李< / ul > < / >

    另见将外部css样式加载到Angular 2 Component中

    /deep/和>>>是由Chrome中已弃用的相同选择器组合符没有受到影响 Angular会模拟(重写)它们，因此不依赖于浏览器的支持

    这也是为什么/deep/和>>>不能与ViewEncapsulation.Native一起工作的原因，而ViewEncapsulation.Native启用了本地影子DOM，并依赖于浏览器的支持。

小开

在你的组件中，如果你想要应用一些通用的样式，你可以将.class添加到你的主机元素中。

export class MyComponent{
@HostBinding('class') classes = 'classA classB';
小开

试试:host > /deep/:

将以下内容添加到parent.component.less文件

:host {
/deep/ app-child-component {
//your child style
}
}

用你的子选择器替换app-child-component

小开

对于任何想要样式:host的子元素的人，这里有一个如何使用::ng-deep的例子

:host::ng-deep <child element>

如:host::ng-deep span { color: red; }

正如其他人所说，/deep/已弃用


提交答案