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，但是重新加载/刷新页面后它会消失。

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

我的<base href="/">文件中有index.html，似乎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>

Angular2：在PathLocationStrategy下重新加载页面后svg没有显示

1 个答案: