如何遍历并显示 Angular 的 iconRegistry 中的图标？

Question

假设我注册了一组自定义 icons：

iconRegistry
    .addSvgIcon('one', sanitizer.bypassSecurityTrustResourceUrl('images/one.svg'))
    .addSvgIcon('two', sanitizer.bypassSecurityTrustResourceUrl('images/two.svg'))
    .addSvgIcon('three', sanitizer.bypassSecurityTrustResourceUrl('images/three.svg'));

我想在图标库页面中呈现它们。例如，如何访问 *ngFor 结构中的注册表数据？

Answer 1

如果你能以某种方式将图标名称列表保存到组件内的数组中，那么你就可以像这样在模板中循环遍历它，

component

iconList = ['one', 'two', 'three'];

template

<md-icon *ngFor="let iconName of iconList" [svgIcon]="iconName"></md-icon>

编辑

按照评论中的建议，您可以使用addSvgIcon方法从列表开始注册这些图标。

component

constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
    this.iconList.forEach((iconName) => {
     iconRegistry.addSvgIcon(
        iconName,
        sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/' + iconName + '.svg'));
    });
  }

Answer 2

假设您已经按照建议在构造函数中构建了 iconRegistry：

component.ts

iconList = [];

ngOnInit() {
  this.iconRegistry['_svgIconConfigs'].forEach( (value, key) => {
    this.iconList.push(key.slice(1));
  });
}

component.html

<md-icon *ngFor="let iconName of iconList" [svgIcon]="iconName"></md-icon>

这里有一个 plunker 演示 svg 来展示它的实际效果。

如何遍历并显示 Angular 的 iconRegistry 中的图标？

How can I iterate over and display the icons in Angular's iconRegistry?

icons

ngfor

angular