更改样式并在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>

因此，"占位符"one_answers" labEltext"工作正常，ma而不是enabletext，该组件不会更改其样式的boolean变量。

我缺少什么？

下一步是在homecoment中创建一个布尔变量

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