时间戳

首页 > 解决方案 > 角度 6 的 SVG 超链接问题

html - 角度 6 的 SVG 超链接问题

问题描述

我通过Angular 6 组件的文件使用HTML标记显示SVG文件。我们称之为SVG文件。 img.htmla.svg

此a.svg图像包含链接到其他SVG文件的部分，我们只考虑其中的第一个，名为b.svg.

所有的SVG文件都是静态的。它们assets位于 Angular 6 应用程序文件夹的子文件夹中。

当我a.svg直接在我的 Internet 浏览器下打开时，我可以单击超链接部分并导航到b.svg，没有任何问题。

在 Angular 6 下，文件a.svg显示正确，但显然，我无法点击交互部分。

我调查了这个问题，但无法找到有关这种行为的根本原因的真正线索。也许，与安全问题有关。我想知道

  1. 这是 Angular 6 的理想行为吗？
  2. 有没有办法告诉 Angular 6，允许用户对这些图像进行交互？

标签： htmlsvgangular6

解决方案

终于找到了正确的方法。

首先，阅读 Angular的安全指南，它提供了许多很好的提示，尽管远非详尽无遗。

为了让我的代码顺利运行，这是我改变的

首先，在角度组件.html文件中，我将HTML img标记更改为一个div标记，在该标记上我使用[innerHTML]绑定到一个名为 svgFromFile 的内部属性

<div class='e2e-inner-html-bound' [innerHTML]='svgFromFile'></div>

然后，在角度组件.ts文件中，我将实现更改bypassSecurityTrustHtml()为在目标SVG文件的内容上使用

this.fn = '/assets/urba/diagram/' + params['fn'] + '.svg'; // from route parameter to image asset to be served

this.http.get(this.fn, {
  responseType: 'text'
}).subscribe(
  data => {
    console.log(data);
    this.svgFromFile = this.sanitizer.bypassSecurityTrustHtml(data);
  },
  error => console.log('svgFromFile', error)
);

这样做， SVG文件中的嵌入 URL现在是活动的并且可以取消引用。

推荐阅读