Angular2 : PathLocationStrategy에서 페이지를 다시로드 한 후 svg가 표시되지 않습니다.

Question

Angular2의 PathLocationStrategy과 관련된 이상한 svg 문제가 발생합니다. 내 번들 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> 

처럼

는, 해당 아이콘은 내 HTML 템플릿에 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; 
} 

아래 시도하고

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

처럼 HTML 템플릿을 변경하지만 오류 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>