代码之家 › 专栏 › 技术社区 › Vikhyath Maiya

以角度2动态显示图标

angular2-routing typescript angular javascript

1

Vikhyath Maiya · 技术社区 · 9 年前

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

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,在那里我必须动态显示我的数据。ie基于链接名,我必须显示相应的图标。

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

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

</div>

ie如何显示图标。我想要像这样的东西

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

这有可能以任何方式实现吗?或者有其他方式实现吗?。请帮忙

1 回复 | 直到 5 年前

1

3

Vega Stipe 9 年前

在视图中:

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