首页 文章

Angular 2:如何设置组件的主机元素?

提问于
浏览
143

我在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%;
}

这两种方法似乎都不起作用 .

谢谢 .

6 回答

  • 3

    有一个错误,但在此期间修复了 . :host { } 现在工作正常 .

    也支持

    • :host(selector) { ... } for selector 以匹配主机元素上的属性,类,....

    • :host-context(selector) { ... } for selector 匹配父组件上的元素,类,...

    对于跨元素边界匹配的样式,

    • selector /deep/ selector (别名 selector >>> selector 不适用于SASS)

    • UPDATE: SASS正在弃用 /deep/ .
      Angular(TS和Dart)添加 ::ng-deep 作为替代品,也与SASS兼容 .

    所有新浏览器现在都支持

    另见Load external css style into Angular 2 Component

    /deep/>>> 是由不推荐使用的Chrome中相同的选择器组合器 not affected .
    Angular模拟(重写)它们,因此不依赖于支持它们的浏览器 .

    这也是为什么 /deep/>>> 不能与 ViewEncapsulation.Native 一起使用,后者启用原生阴影DOM并依赖于浏览器支持 .

  • 234

    我找到了一个解决方案,如何设置组件元素的样式 . 我没有找到任何文档如何工作,但您可以将属性值放入组件指令中,在'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ünterZöchbauer所说,有一个错误,现在你可以在css文件中设置主机元素的样式,如下所示:

    :host{ ... }
    
  • 11

    看看this issue . 我认为在实施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 {}
    

    this plunker

  • 4

    在组件中,如果要使用某些常规样式,可以将.class添加到主机元素中 .

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

    对于任何想要设计 :host 的子元素的人来说,这里有一个如何使用 ::ng-deep 的示例

    :host::ng-deep <child element>

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

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

  • 28

    试试:host> / deep /:

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

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

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

相关问题