0

我有一个ng2-avatar组件，其背景颜色绑定到我的组件的属性。背景颜色最初设置正确，但当我的组件的背景颜色属性更改时不会更新。这似乎是 ng2-avatar 组件的一个错误，但我可能做错了什么。如何在颜色属性更新时更新头像背景颜色？

组件.html

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

组件.ts

import {Component} from '@angular/core';

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

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

GitHub 上的完整代码

4

1 回答 1

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>

这就是他们在这个演示中所做的：

于 2018-09-17T21:09:17.347 回答