从 css 文件中获取图标列表以在 Angular 6 组件中使用答案

【问题标题】：Get list of icons from css file to use inside Angular 6 component从 css 文件中获取图标列表以在 Angular 6 组件中使用
【发布时间】：2018-11-12 14:06:10
【问题描述】：

我在一个 Angular 6 应用程序中。我经常需要创建允许从特定文件 custom-icons.css 中选择自定义图标的下拉菜单。

例如： TS：

@Component({
    selector: "my-component",
    templateUrl: "./my-component.component.html",
    styleUrls: ["./my-component.component.scss"],
})
export class IconDialogComponent implements OnInit {
    icons = [
        "icon-up",
        "icon-down",
        "icon-left",
        //and 100 more icons
]
constructor() {}
ngOnInit() {}

HTML：

<div class="icon-container" *ngFor="let li of icons">
        <div>
            <i [ngClass]="[li]"> //this is to show icon
                <span class="icon-text"> {{ li }} </span> //this is to show the label for the icon
            </i>
        </div>
</div>

现在，我认为最好每次都重写每个组件中的所有图标，我有这种下拉菜单。例如，如果 custom-icons.css 中的图标发生变化，组件中的列表不会自动更新。

我不知道该怎么办。也许以某种方式运行从文件 css 中选择所有类的脚本可能是一个解决方案，但是我不知道如何在 Angular 组件中使用它。

任何建议将不胜感激。

【问题讨论】：

标签： angular css icons

【解决方案1】：

我的朋友，您需要使用服务。 https://angular.io/tutorial/toh-pt4

【讨论】：

您好，感谢您的回复。服务肯定可以帮助我，但我不知道如何访问 css 文件以获取该服务中的所有类。