css - Angular 2动态样式绑定(bind)

我有以下Angular 2组件：

import { Component, Inject, Input } from '@angular/core';

@Component({
    selector: 'generic-component',
    templateUrl: 'generic-component.component.html',
    styleUrls : ['generic-component.component.css']
 })
 export class GenericComponentComponent{
    @Input() backCol: string = "#F0F8FF";
    @Input() divClass: string = "myClass";
    ...
 }

与模板html：

<div class={{divClass}} [style.backgroundColor]="backCol">
    This is a div
</div>

当应用程序启动时，模板使用默认的backCol十六进制颜色变量正确呈现div。

但是我想在事件之后将backCol变量字符串更改为另一种十六进制颜色。

在父组件上，我有这样的东西：

@Component({
  template: `
    <generic-component divClass={{myComp.divClass}} [style.backgroundCol]="myComp.backCol">
    </generic-component>
   `
})
export class ParentComp{
  myComp = new GenericComponentComponent();
}
onColorChange(){
  this.myComp.divClass = "mySecondClass";
  this.myComp.backCol = "#A22B11";
}

但是新颜色不会呈现onColorChange（）调用。所有其他属性绑定（如divClass）均已更新并正确呈现。我究竟做错了什么？

最佳答案

以下不是获取子组件参考的正确方法

export class ParentComp{
  myComp = new GenericComponentComponent();
}

您需要使用@ViewChild来获取对子组件的引用：
在您的父模板中：

<generic-component #child>
</generic-component>

此外，您不需要将类和样式作为输入。由于您可以使用@ViewChild获得对孩子属性的引用

在您的父组件中：

@Component({
  template: `
    <generic-component #child>
    </generic-component>
   `
})
export class ParentComp{

    @ViewChild('child') myComp;

    onColorChange(){
      this.myComp.divClass = "mySecondClass";
      this.myComp.backCol = "#A22B11";
    }
}

编辑：用@ViewChildren示例更新了plunkr。
例：
https://plnkr.co/edit/a0zddtEe0Q3No4mfaKQZ?p=preview

关于css - Angular 2动态样式绑定(bind)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41611452/