更改Angular 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; 
    //} 
} 

和關聯模板：

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

所以，如果我在構造函數中做 「enabletext」 的值，一切工作正常。好。

現在我努力使向前邁進了一步，並使用外部組件，因此創造了這個：

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，組件不會改變其佈局變量的值。

我失蹤了？

下一步是建立在homecomponent布爾變量，所以我會改變Choice上的風格，因爲我以這種方式

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

我將如何做到這一點希望？

感謝所有

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>