html - 将类添加到 Angular2 组件 HTML 标记不应用样式

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

所以如果你想在我的组件中设置样式，你应该在我的组件类中编写你的类。

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() { }
}