Angular 2:如何给组件的宿主元素设置样式?
Angular 2: How to style host element of the component?
我在 Angular 2 中有一个名为 my-comp 的组件:
<my-comp></my-comp>
如何在 Angular 2 中设置此组件的宿主元素的样式?
在 Polymer 中,您将使用“:host”选择器。我在Angular2试过了,但是不行。
:host {
display: block;
width: 100%;
height: 100%;
}
我也试过使用组件作为选择器:
my-comp {
display: block;
width: 100%;
height: 100%;
}
这两种方法似乎都不起作用。
谢谢。
签出this issue. I think the bug will be resolved when new template precompilation logic即将实施。现在我认为你能做的最好的事情就是将你的模板包装成 <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(selector) { ... }
用于 selector
匹配属性,类,...在宿主元素上
:host-context(selector) { ... }
用于 selector
匹配元素,类,...在父组件上
selector /deep/ selector
(别名 selector >>> selector
不适用于 SASS)用于跨元素边界匹配的样式
更新: SASS 弃用 /deep/
.
Angular(TS 和 Dart)添加了 ::ng-deep
作为与 SASS.
兼容的替代品
更新2: ::slotted
::slotted
现在受到所有新浏览器的支持,并且可以与 `ViewEncapsulation.ShadowDom
一起使用
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
另见
/deep/
和 >>>
不受 与 Chrome 中已弃用的相同选择器组合器的影响。
Angular 模拟(重写)它们,因此不依赖于支持它们的浏览器。
这也是为什么 /deep/
和 >>>
不能与启用原生阴影 DOM 并依赖于浏览器支持的 ViewEncapsulation.Native
一起工作。
在您的组件中,如果您想要应用一些通用样式,您可以将 .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/
已弃用
我在 Angular 2 中有一个名为 my-comp 的组件:
<my-comp></my-comp>
如何在 Angular 2 中设置此组件的宿主元素的样式?
在 Polymer 中,您将使用“:host”选择器。我在Angular2试过了,但是不行。
:host {
display: block;
width: 100%;
height: 100%;
}
我也试过使用组件作为选择器:
my-comp {
display: block;
width: 100%;
height: 100%;
}
这两种方法似乎都不起作用。
谢谢。
签出this issue. I think the bug will be resolved when new template precompilation logic即将实施。现在我认为你能做的最好的事情就是将你的模板包装成 <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(selector) { ... }
用于selector
匹配属性,类,...在宿主元素上:host-context(selector) { ... }
用于selector
匹配元素,类,...在父组件上selector /deep/ selector
(别名selector >>> selector
不适用于 SASS)用于跨元素边界匹配的样式更新: SASS 弃用
/deep/
.
Angular(TS 和 Dart)添加了::ng-deep
作为与 SASS. 兼容的替代品
更新2:
::slotted
::slotted
现在受到所有新浏览器的支持,并且可以与 `ViewEncapsulation.ShadowDom
一起使用 https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
另见
/deep/
和 >>>
不受 与 Chrome 中已弃用的相同选择器组合器的影响。
Angular 模拟(重写)它们,因此不依赖于支持它们的浏览器。
这也是为什么 /deep/
和 >>>
不能与启用原生阴影 DOM 并依赖于浏览器支持的 ViewEncapsulation.Native
一起工作。
在您的组件中,如果您想要应用一些通用样式,您可以将 .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/
已弃用