Angular 如何迭代并以角度显示图标'；什么是国际注册？

假设我有一套自定义注册：

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

---

我想在图标库页面中呈现它们。例如，如何访问

*ngFor

结构中的注册表数据？

如果您可以将图标名称列表保存到组件内部的数组中，则可以在模板中像这样循环

组成部分

模板

---

如果您可以将图标名称列表保存到组件内部的数组中，那么您可以在模板中循环使用它，如下所示

组成部分

模板

---

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

组件。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>

---

下面是一个svg演示，演示如何使用它。

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

组件。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>

---

这里有一个svg演示，演示如何使用它。

是的，但我希望避免管理单独的列表。也许我应该创建一个列表，并在其中循环以注册图标。是的，我打算建议这样做。：）也可以使用此方法，

addSvgIconInNamespace

将图标添加到名称空间。但我不知道如何从中提取图标名称：）如果您登录

此

属性，可能您会得到一些提示，说明如何使用该选项来获取在其下注册的名称列表。按照建议更新了我的答案。是的，但我希望避免管理单独的列表。也许我应该创建一个列表，并在其中循环以注册图标。是的，我打算建议这样做。：）也可以使用此方法，

addSvgIconInNamespace

将图标添加到名称空间。但我不确定如何从中提取图标名称：）如果您登录

此

属性，可能您会得到一些提示，说明如何使用该选项获取在其下注册的名称列表。根据建议更新了我的答案。

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