如何将图标名称从数组传递到

Question

我正在尝试将图标名称动态传递给我的 html。

它适用于 ion-icons，但不适用于 fontAwesome 图标。

tabs.page.ts：

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

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})

export class TabsPage {

  public pages = [
    { title: 'Catalog', url: 'home', icon: 'home', type: 'ion' },
    { title: 'Account', url: '/about', icon: 'square', type: 'fa' },
    { title: 'Contact', url: '/contact', icon: 'square', type: 'fa' },
    { title: 'Gallery', url: '/gallery', icon: 'square', type: 'fa' },
    { title: 'Setting', url: '/setting', icon: 'settings', type: 'ion',
 children: [
        { title: 'sub-menu1', url: '/sub-menu1', icon: 'person' },
        { title: 'sub-menu2', url: '/sub-menu2', icon: 'person' },
        { title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }
      ] }
  ];

  
  constructor() {}

}

tabs.page.html：

  <ion-menu-toggle *ngIf="p.url"> 
    <ion-item>
      <ion-icon [name]="p.icon" slot="start" *ngIf="p.type === 'ion'"></ion-icon>
      <fa-icon [icon]="['fas', 'p.icon']" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>        
      <ion-label>
        {{ p.title }}
      </ion-label>
    </ion-item>
  </ion-menu-toggle> 

我收到此错误：

error TS2322: Type '"p.icon"' is not assignable to type 'IconName'.   

我尝试更改代码，但出现以下错误：

<fa-icon [icon]="p.icon" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>

错误 TS2322：类型“string”无法分配给类型“IconProp”。

 <fa-icon [icon]="['fas', p.icon]" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>

错误 TS2322：类型“string”无法分配给类型“IconName”。

直接声明时图标完美显示：

<fa-icon [icon]="['fas', 'cube']" slot="start" style="font-size:26px;" *ngIf="p.type === 'fa'"></fa-icon>

有人知道怎么解决吗？

Answer 1

这应该可以解决问题：

<fa-icon [icon]="['far', p.icon]"></fa-icon>

请注意，引号消失了，因此它被解释为对象的属性而不是字符串。

Answer 2

看起来 font-awesome 需要一个字符串数组，所以当它是这样的 fa 时，您实际上可以更改图标值：

  public pages = [
{ title: 'Catalog', url: 'home', icon: 'home', type: 'ion' },
{ title: 'Account', url: '/about', icon: ['fas','square'], type: 'fa' },
{ title: 'Contact', url: '/contact', icon: ['fas','square'], type: 'fa' },
{ title: 'Gallery', url: '/gallery', icon: ['fas','square'], type: 'fa' },
{ title: 'Setting', url: '/setting', icon: 'settings', type: 'ion'];

并在 html 上提供它，如下所示：

<fa-icon [icon]="p.icon"></fa-icon>

Answer 3

公共专栏：[ '类型'：“删除”， '价值'： { 'textBtnYes': '是', 'textBtnNo': '否', 'textLabel': '您确定要删除该图像吗？', 'iconClass': '垃圾', 'iconHoverColor': '#14aaf5' } ];

      <icon [textLabel]="rowData.value.textLabel"
                                                        
      [textBtnYes]="rowData.value.textBtnYes"
                                                        
      [textBtnNo]="rowData.value.textBtnNo"
                                                        
      [iconHoverColor]="rowData.value.iconHoverColor>

    </icon>