Угловая интерполяция для иконки не работает со шрифтом

Question

В новом компоненте Angular Material Tree это часть разметки, используемой в примерах ( Angular Material tree с плоским узлом, пример ):

<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.filename">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.filename}} : {{node.type}}
</mat-tree-node>

Обратите внимание, что естьэто интерполяция внутри тега mat-icon, которая определяет, какой значок показывать.

Я использую в своем проекте шрифт awesome вместо значков Material Design, поэтому я пытаюсь найти способ сделать компонент дереваработать со шрифтами awesome icons.

До сих пор я пытался заменить тег mat-icon следующим:

<i class="{{treeControl.isExpanded(node) ? 'fas fa-chevron-down' : 'fas fa-chevron-right'}}"></i>

Я также пробовал, где Font Awesome зарегистрирован, чтобы я мог использоватьthis:

<mat-icon fontIcon="{{treeControl.isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'}}"></mat-icon>

В обоих случаях изначально появляется значок шеврон-вправо, и щелчок по расширению работает, но значок не меняется.Однако, если я разверну несколько уровней, затем сверну верхний уровень, а затем снова разверну верхний уровень, все нижние уровни показывают правильный значок (шеврон вниз).

Похоже, что treeControl.isExpanded(node) не выполняетсяв ожидаемое время (при нажатии кнопки со значком).Есть ли какие-либо решения для этой проблемы?

Вот стек, который демонстрирует проблему: https://stackblitz.com/edit/angular-fx4glo?file=app%2Ftree-flat-overview-example.html

Answer 1

Решение для Font Awesome 5 (SVG):

.html

<ng-container *ngFor="let socialItem of socialItems">
    <a
      href="{{ socialItem.url }}"
      target="_blank"
      attr.aria-label="{{ socialItem.name }}. Click here to check our {{ socialItem.name }}."
      role="menuitem"
      title="{{ socialItem.name }}"
      ><fa-icon [icon]="socialItem.icon"></fa-icon>
    </a>
</ng-container>

.ts

public socialItems: {
    icon: [string, string];
    name: string;
    url: string;
  }[] = [
    {
      icon: ['fab', 'behance'],
      name: 'Behance',
      url: 'https://behance.net'
    },
    ... // Next elements of socialItems...
}

Предполагается, что все шаги здесь выполнены для импорта модуля FontAwesome с его значками.

Answer 2

Угловые атрибуты и интерполяции

Это нормально.Когда вы помещаете интерполяцию в значение атрибута, например,

class="{{ myFunction() }}"

Angular будет вызывать myFunction() только один раз (когда элемент создан).

Здесь вам нужно свойствосвязывание (так называемое одностороннее связывание данных), то есть заключает атрибут в квадратные скобки.

Обратите внимание, что он не будет работать "из коробки" с атрибутом class: связатьзначение атрибута class, вы можете использовать директиву [ngClass], например:

<i class="fas" [ngClass]="{'fa-chevron-down':treeControl.isExpaned(node), 'fa-chevron-right':!treeControl.isExpaned(node) }"></i>

Решение: вмешательство библиотеки

Проблема в этом случае заключалась в том, что вы использовали JSверсия FontAwesome - которая в большинстве случаев работает нормально, но не тогда, когда дело доходит до изменения класса значков «на лету».

Эта проблема решается с помощью классического варианта FontAwesome css-font, которыйесть, добавив ссылку, которую вы найдете здесь вместо скрипта.

Пожалуйста, посмотрите на разветвленный Stackblitz здесь: https://angular -fx4glo-2mjlrg.stackblitz.io

Ссылка: Привязка свойства , директива ngClass