Angular 2：如何设置组件的主机元素？

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

<my-comp></my-comp> 

如何在Angular 2中设置这个组件的主机元素？

在Polymer中，您可以使用“：host”select器。 我在Angular 2中试了一下，但是不行。

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

我也尝试使用组件作为select器：

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

两种方法似乎都不起作用。

谢谢。

Answer 1

有一个错误，但在此期间被修正了。 :host { }现在工作正常。

也支持

• :host(selector) { ... }用于selector匹配主机元素上的属性，类，…

• :host-context(selector) { ... }用于selector在父组件上匹配元素，类，…

• selector /deep/ selector （别名selector >>> selector不能与SASS一起使用），以便跨越元素边界匹配样式

  • 更新： SASS是deprecating /deep/ 。
    Angular（TS和Dart）join::ng-deep作为与SASS兼容的替代品。

另请参见将外部css样式加载到Angular 2组件中

/deep/和>>> 不会受到 Chrome中相同的select器组合器的影响 。
Angular模拟（重写）它们，因此不依赖于支持它们的浏览器。

这也是为什么/deep/和>>>不能与ViewEncapsulation.Native一起ViewEncapsulation.Native ，它可以启用本地影子DOM，并且依赖于浏览器的支持。

Answer 2

我已经find了一个解决scheme如何devise组件元素。 我还没有find任何文件如何工作，但你可以把属性值放在组件指令，在这样的'主机'属性下：

 @Component({ ... styles: [''' :host { 'style': 'display: table; height: 100%', 'class': 'myClass' }''' }) export class MyComponent { constructor() {} } 

更新：正如GünterZöchbauer提到，有一个错误，现在你可以风格的主机元素，即使在CSS文件，就像这样：

 :host{ ... } 

Answer 3

看看这个问题 。 我认为这个bug将会在新的模板预编译逻辑被执行时被解决。 现在我认为你能做的最好的事情就是将你的模板包装到<div class="root"> ，

 @Component({ ... }) @View({ template: ` <div class="root"> <h2>Hello Angular2!</h2> <p>here is your template</p> </div> `, styles: [` .root { background: blue; } `], ... }) class SomeComponent {} 

看到这个笨蛋

Answer 4

在你的组件中，你可以添加.class到你的主机元素，如果你有一些一般的风格，你想申请。

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

Answer 5

试试：host> / deep /：

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

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

用你的子select器replaceapp-child-component

Answer 6

对于任何想要devisea :host子元素的人来说，都是一个如何使用::ng-deep的例子

:host::ng-deep <child element>

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

正如别人所说/deep/已被弃用