添加类Angular2组件的HTML标记不适样式

在Angular2，当我在我的自定义添加一个类标签Angular2组件，像这样：添加类Angular2组件的HTML标记不适样式

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

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

来源

2017-08-10 user5080246

发布组件修饰符部分，请 – Vega

：

@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>

希望这会帮助你。

来源

2017-08-10 10:02:58

你为什么使用这种方法？所有你需要的是添加一些样式到你的my-component。

CSS

my-component { 
    background: black; 
    text-align: center; 
}

当然，在你的组件如果你想传递的任何东西一样的className然后使用绑定来添加HTML代码

来源

2017-08-10 09:58:54

实际上，这对Chrome（或任何其他浏览器）无效。我遇到的问题与我原来的问题一样：开发人员工具告诉我风格在那里，但在视觉上，它不是。 – user5080246

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

来源

2017-08-10 10:05:00

添加类Angular2组件的HTML标记不适样式

回答

相关问题