Question

在body标签内部我有svg sprites

<svg version="1.1" width="0" height="0" style="position: absolute;">
   <symbol id="icon-mail" viewBox="0 0 15 13">
     ...
   </symbol>
</svg>

我在像这样的角度2应用程序中使用它

<svg class="icon"><use xlink:href="#icon-mail" /></svg>

如果我加载主页面，例如localhost:9000精灵被渲染，但如果我完全加载其他网址localhost:9000/users则不会渲染精灵。

在角度2 app中使用精灵的最佳方法是什么？

Answer 1

使用APP_BASE_HREF代替<base>元素。

bootstrap(AppComponent, [{provide: APP_BASE_HREF, useValue: '/'}])

另见Angular 2.0 router not working on reloading the browser

Answer 2

如果有人在2.0版本之后找到了这个答案，那么新的方法是：用其他导入在文件顶部添加import

import { APP_BASE_HREF } from "@angular/common";

在APP_BASE_HREF

中的提供者数组中添加@NgModule

@NgModule({
  declarations: [
    AppComponent,
    // your code here
  ],
  imports: [
   // your code here
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: "/"
    },
    // your code here
  ],
  bootstrap: [ AppComponent ]
})

从<base href="/">

删除index.html

SVG精灵角2

2 个答案: