Angular2：svg在PathLocationStrategy下重新加載頁面後沒有顯示

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會消失。

當我檢查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>