Angular2コンポーネントのHTMLマークアップにクラスを追加するAngular2でスタイル

Question

を適用していない、私はそうのように私のカスタムAngular2コンポーネントのクラスのタグを追加する場合：

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

...スタイリングはに適用されません。 HTML。 Chromeデベロッパーツールでは、my-component要素を選択すると、スタイルインスペクターでスタイルが適用されていることが示されますが、視覚的には適用されません。これは正常ですか？それをどうやって回避するのですか？

Answer 1

を追加するためのコンポーネントでCSS

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

そしてもちろん、：

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

これがあなたを助けてくれることを願っています。

Answer 2

なぜこの方法を使用しますか？あなたが必要とするのは、あなたのmy-componentにスタイルを加えるだけです。

あなたはclassNameはその後、バインディングを使用して好きなものを渡したい場合は、HTMLコード

Answer 3

角2は、Webコンポーネント標準の一部であり、DOMツリーとスタイルのカプセル化を有効にするシャドウ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() { } 
}