0

尽管我使用 icomoon 生成了 SVG，但为了提供软可用性，我为它创建了一个组件，并意识到在此之前这是足够好的实践。一些图标只是变成空白。而且我仍然找不到导致这种行为的原因。我已经调查了 Stack Overflow 上的所有问题（不仅如此），但没有找到任何解决我的问题的解决方案。

我在 index.html 中预取了 symbol-defs.svg（symbol-defs.svg 的大小 ~ 200kb）：

<link rel="prefetch" href="assets/icon/symbol-defs.svg" as="image" />

结果，我得到了这个：

在此处输入图像描述

大多数图标的空白空间。

图标组件：

@Component({
  selector: 'icon',
  templateUrl: './icon.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconComponent {
  @Input()
  set icon(icon: string) {
    this.use = icon ? `${this.location}#${icon}` : '';
  }

  use: string;
  location: string = 'assets/icon/symbol-defs.svg';
}

图标组件 HTML：

<svg>
  <use [attr.xlink:href]="use" [attr.href]="use"></use>
</svg>

用法：

<icon icon="finance-service"></icon>

更新：

此问题仅在开发模式下的prod模式下出现，它表现良好。

4

1 回答 1

0

未检测到出现此类行为的原因。我已经深入了解了这种情况，并尝试了大量的解决方案来寻找差距位置。唯一将事情从死点移开但完全没有解决问题的方法是在 icon.component 中添加 ChangeDetection.markForCheck()。我很确定你拥有的更大的项目越接近这个问题（我的情况是一个巨大的企业，这个问题变得非常关键，因为几乎所有图标都消失了）。

对您不起作用的解决方案（使用这种精灵方法）：

使用任何方法预取 symbol-defs.svg，方法是使用链接 rel="prefetch" 或使用角度 APP_INITIALIZER 方法预加载它。

将解决问题的解决方案（但仍然不会带来上一个问题的答案）是：

将您的 SVG 精灵放在 index.html 的顶部，在结束标记 </head 之前，从图标组件中删除位置字符串。您获得的利润是 - 减去 1 个请求，清晰/稳定的可用性。

于 2020-07-30T12:37:14.853 回答