以角度 2 动态显示图标

Question

我正在尝试动态加载我的网站的一部分。我在界面中定义了我的图标的所有图标类，如下所示

import { OpaqueToken } from "@angular/core";
import {IAppConfig} from './app.interface'

export let APP_CONFIG = new OpaqueToken("app.config");

export const AppConfig: IAppConfig = {    

employee:"circular tabbaricon users icon",
employee1:"circular tabbaricon users icon"
....etc

};

界面

export interface IAppConfig {

employee:string;
employee1:string;
}

我正在使用

将它导入到我的组件中

constructor( @Inject(APP_CONFIG) private config: IAppConfig) { }

现在我有一个 ngFor，我必须在其中动态显示我的数据。即基于链接名，我必须显示适当的图标。

<div class="ui column" *ngFor="let x of funtionalities.routeLinks ">

<i class={{config+'.'+x.linkName}}  id="iconBack"></i>

</div>

即如何显示图标。我想要类似的东西

 <i class={{config.x.linkName}}></i>

这是否可以做任何方式或有任何其他方式来实现这一点？请帮助

Answer 1

在视图中：

<div class="ui column" *ngFor="let x of funtionalities.routeLinks ">

   <i [ngClass]="getTheClass(x.linkName)"  id="iconBack"></i>

</div>

在课堂上：

import config from "./config.ts'
...
getTheClass(appendix){
    return config[appendix]
}