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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

新手学 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>

MatIcon

registerIcons

iconsLoaded

5 条回复 • 2024-12-30 11:48:33 +08:00