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>

所以，如果我的值为＆＃34; enabletext＆＃34;在构造函数中一切正常。好。

现在我正在尝试向前迈出一步并使用外部组件，因此创建了这个：

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>

所以＆＃34;占位符＆＃34;和＆＃34; labeltext＆＃34;工作得很好，不是启用文本，组件不会改变它的样式，无论布尔变量的值是什么。

我缺少什么？

下一步是在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>

在Angular 2中更改样式和绑定

1 个答案: