각도 2로 스타일과 바인딩을 변경하십시오.

Question

저는 Angular 2의 초보자입니다. 그래서 나는 그것을 실감하고 증명합니다.

간단한 구성 요소를 만들고 동적 문제를 만들려고합니다.

import {Directive, Component, Input, ElementRef} from '@angular/core'; 

@Component({ 
    selector: 'textboxcomponent', 

    template: require('./textboxparameter.component.html'), 
}) 

export class TextBoxComponent 
{ 
    @Input() labeltext: string; 
    @Input() placeholdertext: string; 
    @Input() enabletext: boolean; 

    //constructor() { 
    // this.enabletext= false; 
    //} 
} 

과 연관 템플릿 : 내가 생성자에서 "enabletext"의 값을 만들 경우

<div class="form-group" > 
    <label for="surname"> {{labeltext}} </label> 
    <input class="form-control" id="surname" type="text" required autofocus 
      placeholder={{placeholdertext}} 
      [style.background-color]="enabletext ? 'green': 'red'"/> 
</div> 

그래서, 모두가 잘 작동

그래서이 내 구성 요소입니다. 좋은.

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'home', 
    template: require('./home.component.html') 
}) 
export class HomeComponent { 
} 

및 템플릿에 내가 previus 구성 요소를 사용하고 있습니다 : 그래서

<textboxcomponent labeltext="Surname" enabletext="false" placeholdertext="placeholder example"></textboxcomponent> 

을

지금 내가 앞으로 단계를 확인하고 외부 구성 요소를 사용하는 것을 시도하고있다, 그래서이 생성 "placeholder"및 "labeltext"는 enabletext가 아니라 정상적으로 작동합니다. 구성 요소는 부울 변수의 값을 변경하지 않습니다.

내가 무엇이 누락 되었습니까?

다음 단계는 내가 이런 식으로 내가 그것을 어떻게 할 것

<textboxcomponent labeltext="Surname" enabletext="homeEnabled" 
placeholdertext="placeholder example"></textboxcomponent> 

에서 원하는대로 내가 텍스트 컴포넌트의 스타일을 변경합니다 homecomponent에서 부울 변수를 만드는 것입니다? 모든

Answer 1

<div class="form-group" > 
    <label for="surname"> {{labeltext}} </label> 
    <input class="form-control" id="surname" type="text" required autofocus 
      placeholder={{placeholdertext}} 
      [style.background]="enabletext ? 'green': 'red'"/> 
</div>