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

所以“占位符”和“标签文本”工作正常，不是启用文本，无论布尔变量的值如何，组件都不会改变其样式。

我错过了什么？

下一步是在 homecomponent 中创建一个布尔变量，所以我会以这种方式更改 textcomponent 的样式

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