求助: 当使用 Angular 的 MatIcon 时,有概率不显示 icon 或者只显示部分的.

[CyouYamato]

新手学 Angular 人麻了. 附上代码
AComponent ts:
this.iconsLoaded$.subscribe((data: boolean) => {
this.iconsLoaded = data;
this.cdr.detectChanges();
});

async registerIcons() {
for (const item of this.gridColumns) {
// 从 IndexedDB 中取出 svg
const svg: string | undefined = await getSvg(item);
if (!svg) {
const svgContent = await fetch(`icon/${item}.svg`).then((res) =>
res.text(),
);
await setSvg(item, svgContent); // 缓存到 IndexedDB
this.matIconRegistry.addSvgIconLiteral(
item,
this.sanitizer.bypassSecurityTrustHtml(svgContent),
);
} else {
this.matIconRegistry.addSvgIconLiteral(
item,
this.sanitizer.bypassSecurityTrustHtml(svg),
);
}
}
return true;
}

BComponent ts:
await this.AComponent.registerIcons();
this.AComponent.iconSubject.next(true);

A html:
<ng-container class="grid-container">
<mat-grid-list cols="2" rowHeight="3:1">
@if (iconsLoaded$ | async) {
@for (item of gridColumns; track item) {
<mat-grid-tile class="grid-item">
<div class="content-container">
<mat-icon [svgIcon]="item"></mat-icon>
<span>
{{ cityInfo[item] }}
</span>
</div>
</mat-grid-tile>
}
}
</mat-grid-list>
</ng-container>

[chihiro2014]

为啥整这么复杂？直接放在前端静态目录就完了=。=，然后注册到 maticonregistry 统一管理。不至于为了一点性能来折磨自己

[wunonglin]

mat icon 有 npm 包，直接装了用就行了，区区 icon 用 indexdb 那不整复杂了，不是有 cdn 么

[wunonglin]

https://github.com/marella/material-icons

[CyouYamato]

@chihiro2014 准备部署在自己的小破服务器上, 想着能省一点带宽是一点, svg 这东西正好不需要频繁更新.

[chihiro2014]

@CyouYamato 上面说的对，用 CDN 也不走你的流量。。。真的别为难自己。。。而且这种代码也用不着写 await 和 rxjs