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