如何刷新Angular上的Font Awesome图标? [英] How to refresh Font Awesome icon on Angular?

问题描述

有什么方法可以动态更改字体超赞图标?我希望用户能够动态选择一个字体超赞图标.仅当您第一次添加课程时，它才有效.我尝试做的地方是- MatDialog .有一种形式，用户必须选择图标，背景色和类别名称.要选择图标，用户应打开另一个对话框.

Is there any way to change font awesome icon dynamically? I want user to be able to select one of font awesome icons dynamically. It works only when you add class first time. The place where I try to do it is - MatDialog. There is form where user have to select icon, background color and category name. To select icon user should open another dialog.

我正在使用 Angular 9.1.4 和 Font Awesome 5.13.0 .

这就是我尝试过的:

category-dialog.component.html

<div [ngStyle]="selectedColor">
    <i [ngClass]="selectedIcon"></i>
</div>

category-dialog.component.ts

openIconDialog(): void {
  const dialogRef = this.dialog.open(DialogIconSelectComponent, { width: '15rem' });
  dialogRef.afterClosed().subscribe(result => {
    this.selectedIcon = result;
  });
}

这仅适用于第一次.但是，当您尝试更改 selectedIcon 图标时，UI却不会刷新元素类.

This works only first time. But when you try to change icon selectedIcon changes, but UI doesn't refresh element class.

---

2.使用@ViewChild

@ViewChild('iconElement') iconElement: ElementRef;

constructor(private dialog: MatDialog,
            private renderer: Renderer2) { }

openIconDialog(): void {
  const dialogRef = this.dialog.open(DialogIconSelectComponent, { width: '15rem' });
  dialogRef.afterClosed().subscribe((result: string) => {
    this.iconElement.nativeElement.className = result;
  });
}

这也仅在第一次使用.

---

3.使用@ViewChild和Renderer2

category-dialog.component.html

<div #colorElement [ngStyle]="selectedColor">
    <i #iconElement></i>
</div>

category-dialog.component.ts

@ViewChild('colorElement') parentElement: ElementRef;
@ViewChild('iconElement') childElement: ElementRef;

constructor(private dialog: MatDialog,
            private renderer: Renderer2) { }

openIconDialog(): void {
  const dialogRef = this.dialog.open(DialogIconSelectComponent, { width: '15rem' });
  dialogRef.afterClosed().subscribe(result => {
    this.replaceIcon(result);
  });
}

replaceIcon(iconClass: string): void {
  const i = this.renderer.createElement('i');
  this.renderer.setProperty(i, 'class', iconClass);
  this.renderer.removeChild(this.parentElement.nativeElement, this.childElement);
  this.renderer.appendChild(this.parentElement.nativeElement, i);
}

那根本行不通.

---

有什么方法可以动态地更改超棒的字体吗?

---

Is there any way how to change font awesome dynamically?

推荐答案

解决方案

浪费了我大量的空闲时间来研究如何解决此问题.使用 Renderer2 和所有脏Javascript方法进行了所有尝试.但是有一天，我想到了使用 innerHtml 的想法.

Resolution

Wasted lot of my free time to investigate how to resolve this issue. Tried everything with Renderer2 and all dirty Javascript methods. But one day I came up with idea to use innerHtml.

呈现内部HTML的新字符串以交互方式更改真棒字体"图标.

Rendering new string of inner HTML changes Font Awesome icons interactively.

<div [ngStyle]="selectedColor" [innerHtml]="selectedIconHtml"></div>

category-dialog.component.ts

openIconDialog(): void {
  const dialogRef = this.dialog.open(DialogIconSelectComponent, { width: '15rem' });
  dialogRef.afterClosed().subscribe((result: string) => {
    // EVERY TIME NEW ELEMENT WITH NEW FA CLASS
    this.selectedIconHtml = `<i class="${result}"></i>`;
  });
}

此解决方案-针对每个图标选择更改的< div> 元素内容(内部html).

This solution - on every icon selection's changing <div> element content (inner html).

这篇关于如何刷新Angular上的Font Awesome图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！