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

以角度2动态显示图标

1 个答案: