将背景颜色绑定到 ng2-avatar 组件
Binding background color to ng2-avatar component
我有一个 ng2-avatar 组件,其背景色绑定到组件的 属性。背景颜色最初设置正确,但当我的组件的背景颜色 属性 更改时不会更新。这似乎是 ng2-avatar 组件的错误,但可能是我做错了什么。颜色属性更新时,如何让头像背景颜色更新?
component.html
<avatar [background]="bg"></avatar>
<button (click)="c()">Change</button>
component.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);
}
}
上的完整代码
显然,一旦您更改了头像组件的配置,您就必须在头像组件上调用 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:
我有一个 ng2-avatar 组件,其背景色绑定到组件的 属性。背景颜色最初设置正确,但当我的组件的背景颜色 属性 更改时不会更新。这似乎是 ng2-avatar 组件的错误,但可能是我做错了什么。颜色属性更新时,如何让头像背景颜色更新?
component.html
<avatar [background]="bg"></avatar>
<button (click)="c()">Change</button>
component.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);
}
}
上的完整代码
显然,一旦您更改了头像组件的配置,您就必须在头像组件上调用 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: