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

Angular 2动态样式绑定

1 个答案: