向Angular2组件添加类HT​​ML标记不适用于样式

Question

在Angular2中，当我在我的自定义Angular2组件上添加类标记时，如下所示：

<my-component class="someClass"></my-component>

...样式不会应用于HTML。在Chrome开发者工具中，当我选择my-component元素时，样式检查器会显示正在应用样式，但在视觉上，它们不是。这是正常的吗？我该如何解决这个问题？

Answer 1

Angular 2使用Shadow DOM，它是Web Components标准的一部分，支持DOM树和样式封装。 Angular View Encapsulation

因此，如果您想在my-component中设置样式，则应该在my-component类中编写类。

import { Component, OnInit } from '@angular/core';

@Component({
    teamplte: '<h1 class="myClass">i am my-component</h1>',
    styles: [`
      .myClass {
         someProp: value;
      }
    `]
})

export class ConatinerComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

但是如果你想要在外面设计风格，你必须在容器组件中编写样式和类！

import { Component, OnInit } from '@angular/core';

@Component({
    teamplte: '<my-component class="myClass"></my-component>',
    styles: [`
      .myClass {
         someProp: value;
      }
    `]
})

export class MyComponentComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

Answer 2

如果你想传递className这样的东西，那就使用绑定：

@Component({
 selector: 'my-component',
 template: template,
 styleUrls: ['app/components/nav-bar/nav-bar.style.css'], // or you can add explicit style,
bindings:{
  className: '<'
}  
})

HTML

 <my-component class-name="someClass"></my-component>

希望这会对你有所帮助。