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:
@if (iconsLoaded$ | async) {
@for (item of gridColumns; track item) {
{{ cityInfo[item] }}
}
}
