Angular2ディレクティブにクラス名を追加する方法

Question

CSSルールを適用するために、NG2ディレクティブにクラス名を追加したいと思います。次のコンポーネントを考える：

@Component({ 
    moduleId: module.id, 
    selector: 'search-form', 
    templateUrl: 'search-form.component.html', 
    styleUrls: [ 'search-form.component.css'] 
}) 

私はこの試みた：

search-form { 
    width:100%; 
    display:block; 
} 

をしかし、それは動作しませんでした。

search-formにクラスを追加するにはどうすればよいですか？

Answer 1

@Component({ // or @Directive({ 
    // use `host:` or `@HostBinding()` (not both) 
    // host: {'[class.someclass]': 'true'} 
}) 
class SearchFormComponent { 
    @HostBinding('class.someclass') 
    someClass = true; 
} 

おそらくあなたは、私がその一例を示すことができsearch-form.component.css

:host { 
    width:100%; 
    display:block; 
} 

Answer 2

あなたは、あなたのスタイルシートでのCSSクラスを宣言...検索form.component.css

、あなたのスタイルシート内のコンポーネントをターゲットにする場合は、あなたができる...

search-form { 
    width:100%; 
    display:block; 
} 

この意志タグsearch-formを持つターゲット要素。

Angular2はコンポーネントに基づいているため、コンポーネント内の要素のみを対象としています。実際の要素自体をターゲットにするかどうかはわかりませんが、それはそうだと思います。

Answer 3

に、このCSSを追加することによって、「自己」にスタイルを追加することを意味します。

まず、スタイルシートを作成します。 like

<style> 
.red 
{ 
color:red; 
} 
.blue 
{ 
color:blue; 
} 
</style> 

次に、HTMLにangle.min.jsとともにスタイルシートを含め、以下のようにドロップダウンを作成します。

<select ng-model="a"> 
<option value="red">red</option> 
<option value="blue">blue</option> 

</select> 

次に、以下のようにH1タグを作成します。

<h1 ng-class="a">Header color</h1> 

注意。 HTMLはあなたが作成するng-appのdiv内になければなりません。

これが役に立ちます。ではごきげんよう。