使用属性绑定时刷新Angular表情包

<angular-emojis [name]="emojivar" size="30" (mouseenter)="changeRoutine()" > </angular-emojis>

emojivar = 'taco';
changeRoutine(){
console.log(this.emojivar);
this.emojivar = 'tomato';
console.log(this.emojivar);
}

老实说，我看不出有什么理由不这样做。您可以尝试强制更改检测:

consturctor(private cdr: ChangeDetectorRef) {}
changeRoutine(){
console.log(this.emojivar);
this.emojivar = 'tomato';
console.log(this.emojivar);
this.cdr.detectChanges();
}

[编辑]我看了一下你正在使用的图书馆……它根本不处理任何更改:

https://github.com/saqy/angular-packages/blob/master/projects/angular-emojis/src/lib/angular-emojis.component.ts

我试过了，它对我有效。

TS

import { ChangeDetectorRef, Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(private cdr: ChangeDetectorRef) {}
name = 'Angular';
emojiName = '';
emojiSize = 20;
index = -1;
list = [
'full_moon_with_face',
'first_quarter_moon_with_face',
'star',
'star2',
'sun_with_face',
];
function(str, i) {
this.index = -1;
this.emojiName = str;
this.cdr.detectChanges();
this.index = i;
}
}

<hello name="{{ name }}"></hello>
<p>Click on any emoji to see the Result</p>
<span *ngFor="let emoji of list; index as i">
<angular-emojis
[name]="emoji"
size="20"
(click)="function(emoji, i)"
></angular-emojis>
</span>
<hr />
Resultant Emoji:
<angular-emojis
*ngIf="index != -1"
[name]="emojiName"
[size]="emojiSize"
></angular-emojis>

你可以在这里运行并检查结果。