Angular 2 动态样式绑定

Question

我有以下 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）都已正确更新和呈现。我做错了什么？

Answer 1

以下不是获取子组件引用的正确方法

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