Я в приложении 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 Component.
Любое предложение будет высоко ценится.