0

我有一个显示在右侧栏中的动态图标列表。图标会根据用户的操作传递到侧边栏中。这个动态的图标数组使用ngFor.

不幸的是，有些图标来自 Font Awesome，有些来自 Google Material。

<!--Font Awesome-->
<i class="{{myIcon}}"></i>

<!--Material-->
<md-icon>{{myIcon}}></md-icon>
<!--Or-->
<i class="material-icon">{{myIcon}}</i>

看到它们不是完全匹配，你如何让它们使用 ngFor 显示两种类型，除了图标名称的字符串之外什么都没有。

4

1 回答 1

5

我有一个解决方案给你。我刚刚实现了这一点。

现在我知道您询问了 *ngFor 之间的内容，以根据图标字符串动态选择和呈现适当的图标，但我将记录完整的解决方案，包括为其他人注册字体真棒。

让我们从顶部开始，确保您的标题中包含令人敬畏的字体 css。您可以在http://fontawesome.io/get-started/处通过 fontawesome 向您发送指向其 CDN 版本的链接，并将其包含在您的标题中。

<script src="https://use.fontawesome.com/c26638a4cc.js"></script>

接下来在 app.module 中为 fontawesome 创建并注册一个别名。您可以通过首先导入这些来做到这一点：

import { MdIconModule, MdIconRegistry } from '@angular/material';

不要忘记在您的提供者中包含 MdIconRegistry

  providers: [ 
    ...
    MdIconRegistry,
    ...
  ],

然后让我们在 AppModule 中使用 MdIconRegistry 注册 fontawesome，就像这样..

constructor(..., 
public mdIconRegistry: MdIconRegistry) {

    mdIconRegistry.registerFontClassAlias('fontawesome', 'fa');
    ...
}

到目前为止，我们所做的允许我们在应用程序中使用字体真棒图标，如下所示：

 <md-icon class="some-class" fontSet="fa" fontIcon="fa-trophy"></md-icon>

现在让我们回答最初的问题，即如何仅基于图标字符串动态显示材料设计图标或字体真棒图标。

为此，我将依赖以“fa-”前缀开头的字体很棒的图标。如果我们对此感到满意，那么我可以检查“fa-”并使用它来适当地设置 fontSet 和 fontIcon。

<md-list-item *ngFor="let menuitem of menuList">

<button md-button ...>
    <md-icon [fontSet]="menuitem.icon.substr(0,3) === 'fa-' ? 'fa' : ''" 
             [fontIcon]="menuitem.icon.substr(0,3) === 'fa-' ? menuitem.icon : ''" 
             [ngClass]="{'your-fa-custom-class': true }">
    <span>{{ menuitem.name }} </span>
</button>

ngClass 包括 .your-fa-custom-class ，您可以在其中专门更改字体真棒图标的字体大小。

你都准备好了！

于 2017-05-07T00:41:06.070 回答