각도 2 컴포넌트 typescript 파일에 클래스 속성을 추가하는 방법은 무엇입니까?

Question

각도 2 컴포넌트 typescript 파일에 클래스 속성을 추가하는 방법은 무엇입니까?

다음은 내 꼬리말 구성 요소 코드입니다. 바닥 글 클래스를 추가하고 싶습니다.

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

제안하십시오. 이건 그냥 예입니다

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

:

Answer 1

우선은 다음과 같이 당신의 변수 css_class를 보간, 템플릿 footer.component.html에

그런 다음 구성 요소의 사용자 변수 css_class 공용 속성을 중요한 부분은 class 속성과 그 값입니다.

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 2

당신은 구성 요소의 변수에 Footer 유형을 지정해야합니다.

첫 번째는

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

및 제 2 당신은 몇 가지 조건/플래그에 따라 CSS 클래스를 추가 할 수 있다는 것이다, CSS 클래스는 조건에 해당하는 경우는 DOM에 추가됩니다.

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에 네비게이션 바 고정 바닥 사업부에 추가됩니다.

Answer 3

이 당신의 HTML에 CSS 클래스를 추가 할 수있는 여러 가지 방법이 있습니다 :

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'} 
})