将背景颜色绑定到ng2-avatar组件

时间:2018-09-17 20:54:36

标签: angular property-binding

我有一个ng2-avatar组件,其背景色绑定到该组件的属性。最初正确设置了背景颜色,但是当更改组件的背景颜色属性时,背景颜色不会更新。看来这是ng2-avatar组件的错误,但可能我做错了。当color属性更新时,如何获取头像背景颜色?

component.html

Job > Configuration > General > Restrict where this job can run

component.ts

<avatar [background]="bg"></avatar>
<button (click)="c()">Change</button>

GitHub上的完整代码

1 个答案:

答案 0 :(得分:2)

显然,一旦您更改了头像的配置,就必须在头像组件上调用ngOnInit

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  bg = '#000000';

  @ViewChild('avatar') private elAvatar: any;

  c() {
    console.log('before: ' + this.bg);
    this.bg = '#' + (Math.floor(Math.random() * 900000) + 100000).toString();
    console.log('after: ' + this.bg);
    this.elAvatar.ngOnInit();
  }
}

在模板中:

<avatar #avatar [background]="bg"></avatar>
<button (click)="c()">Change</button>

这就是他们在此演示here中所做的: