时间戳

首页 > 解决方案 > 使用 Angular2+ InMemoryWebAPI 时无法加载 SVG 图标

angular - 使用 Angular2+ InMemoryWebAPI 时无法加载 SVG 图标

问题描述

配置 InMemoryWebAPI SVG 图标时无法使用

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, {dataEncapsulation: false}),
    NoopAnimationsModule,
    AppRoutingModule,
    CustomMaterialModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('~/../assets/mdi.svg'));
  }
}

我尝试使用 apiBase 参数进行配置，但没有成功。

控制台：检索图标时出错：未定义

InMemoryWebAPI 必须忽略 API URL 范围之外的其他 url。

标签： angulariconsangular-materialin-memory-database

解决方案

将 passThruUnknownUrl 选项设置为 'true' 以允许未知请求通过，以便我们可以通过 URL 访问实际资产。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, {dataEncapsulation: false, passThruUnknownUrl: true}),
    NoopAnimationsModule,
    AppRoutingModule,
    CustomMaterialModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('~/../assets/mdi.svg'));
  }
}

推荐阅读