Angular2：在 PathLocationStrategy 下重新加载页面后，svg 未显示

Question

Angular2 的PathLocationStrategy 遇到了一个奇怪的 svg 问题。

我的 html 模板中的 svg 是这样的

<svg class="bell__icon" viewBox="0 0 32 32">
    <use xlink:href="#icon-notificationsmall"></use>
</svg>

在我捆绑的svg文件中，对应的图标是这样的

<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; width: 0; height: 0">
    <symbol viewBox="0 0 32 32" id="icon-notificationsmall">
        <path
        d="M26.2 22.5V12.4c0-4.9-3.4-9.2-8.3-10.2V2c0-1.1-.9-2-2-2-1.1-.1-2 .9-2 2v.3c-4.7 1-8.2 5.2-8.2 10v10.2L2 29h9.8c.6 1.7 2.3 3 4.2 3 2 0 3.6-1.3 4.2-3H30l-3.8-6.5zm-18.5 0v-10c0-3.9 2.7-7.3 6.6-8 1-.1 2.2-.1 3.2 0 3.9.7 6.6 4.2 6.6 8v10l2.4 4.2H5.4l2.3-4.2z"></path>
    </symbol>
</svg>

此 svg 位于标题组件上，将显示在每个页面的顶部。

加载主页后，svg 会正确显示，如果我通过链接来回导航也会显示，但是，在重新加载/刷新页面后它会消失。

当我检查 svg 时，它总是在那里，即使它没有出现。

我的index.html 文件中有一个<base href="/">，似乎this answer 解决了Angular1 中的类似问题。

所以，我在下面对应的.ts文件中尝试了

import {LocationStrategy} from '@angular/common';
private fullPath:any;
constructor(private location:LocationStrategy) {
  this.fullPath = (<any>this.location)._platformLocation.location.href;
}

并更改了html模板，如

<svg class="bell__icon" viewBox="0 0 32 32">
    <use xlink:href="{{fullPath}}#icon-notificationsmall"></use>
</svg>

但我收到错误EXCEPTION: Error: Uncaught (in promise): Template parse errors: Can't bind to ':xlink:href' since it isn't a known native property。

顺便说一句，我的原始代码在HashLocationStrategy下运行良好。

Answer 1

试试

<use attr.xlink:href="{{fullPath}}#icon-notificationsmall"></use>

或

<use [atrr.xlink:href]="fullPath#icon-notificationsmall"></use>