我在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%;
}
这两种方法似乎都不管用。
谢谢。
看看这个问题。我认为当新的模板预编译逻辑实现时，这个错误将得到解决。现在我认为你能做的最好的是包装你的模板到<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;
}
更新: 正如Günter Zöchbauer提到的，有一个错误，现在你可以在css文件中设置host元素的样式，就像这样:
:host{ ... }
有个漏洞，但同时已经修复了。:host{}现在工作正常。
支持的还有
:host(selector) { ... } for selector to match attributes, classes, ... on the host element :host-context(selector) { ... } for selector to match elements, classes, ...on parent components selector /deep/ selector (alias selector >>> selector doesn't work with SASS) for styles to match across element boundaries UPDATE: SASS is deprecating /deep/. Angular (TS and Dart) added ::ng-deep as a replacement that's also compatible with SASS. UPDATE2: ::slotted ::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
参见将外部css样式加载到Angular 2组件中
/deep/和>>>不受Chrome中已弃用的相同选择器组合符的影响。 Angular模拟(重写)了它们，因此不依赖于浏览器对它们的支持。
这也是为什么/deep/和>>>不能使用ViewEncapsulation的原因。本机，启用本机阴影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 <子元素>
例如:host::ng-deep span{颜色:红色;｝
正如其他人所说/深/是不赞成的
