角度2コンポーネントのタイプスクリプトファイルにクラス属性を追加するにはどうすればよいですか？

Question

角度2コンポーネントタイプスクリプトファイルにクラス属性を追加するにはどうすればよいですか？

以下は私のフッターコンポーネントコードです。フッタークラスを追加したいと思います。

footer.component.ts

import { Component } from '@angular/core'; 
import { Footer } from './footer'; 
@Component({ 
    moduleId: module.id, 
    selector: 'footer', 
    templateUrl: 'footer.component.html' 
}) 
export class FooterComponent { 
constructor() { 
    this.title = 'Footer Content'; 
    this.css_class = 'navbar-fixed-bottom'; 
    } 
} 

footer.ts

export class Footer { 
    constructor(
    public title: string 
) { } 
} 

示唆してください。

Answer 1

まずだけで次のようにあなたの変数css_classを補間する、あなたのテンプレートfooter.component.htmlで、その後、あなたの変数css_classコンポーネントのパブリックプロパティ

します

<div class='{{css_class}}'>test</div> 

これはあくまでも一例です重要な部分はclass属性とその値です。

Answer 2

あなたのコンポーネントの変数にFooterタイプを割り当てる必要があります：

import { Component } from '@angular/core'; 
import { Footer } from './footer'; 
@Component({ 
    moduleId: module.id, 
    selector: 'footer', 
    templateUrl: 'footer.component.html' 
}) 
export class FooterComponent { 

    public footerClass: Footer; 

    constructor() { 
    this.footerClass = new Footer('Footer Content'); 
    } 
} 

Answer 3

あなたのHTMLにCSSクラスを追加するいくつかの方法があります。

最初は

<div class='{{css_class}}'>...</div> 

と第二あなたは条件が真のとき、CSSクラスがDOMに追加され、いくつかの条件/フラグに基づいてCSSクラスを追加できるということです。

export class FooterComponent { 
let addCssClass : boolean = true; 

constructor() { 
    this.title = 'Footer Content'; 
    this.css_class = 'navbar-fixed-bottom'; 
    } 
} 

これまでaddCssClassが真であるときに<div [class.navbar-fixed-bottom]="addCssClass">...</div>をHTMLでナビゲーションバーに固定された下 div要素に追加されます。

Answer 4

コンポーネントデコレータのhostメタデータプロパティを使用できます。 https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html

コンポーネントデコレータは次のようになります。

@Component({ 
    moduleId: module.id, 
    selector: 'footer', 
    templateUrl: 'footer.component.html', 
    host: {'class': 'my-footer'} 
})