在 angular 2 中动态显示图标

Question

我正在尝试加载我网站的一部分 dynamially.I 在界面中为我的图标定义了所有图标类

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，我必须根据链接名显示我的数据 dynamically.ie 我必须显示适当的图标。

<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>

在class中：

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

在 angular 2 中动态显示图标

Displaying icons dynamically in angular 2

javascript

typescript

angular2-routing

angular