Routerlink不支持Angular2中的SVG's

我将自己的工具栏从Bootstrap中的glyphicons更改为自定义SVG。我通过一个外部引用SVG的，因为我需要在一个.css文件中设置它们的样式。我的HTML组件如下所示：Routerlink不支持Angular2中的SVG's

<div class="container-fluid"> 
    <button type="button" class="btn btn-info" [routerLink]="['editor/text-properties']"> 
    <object type="image/svg+xml" data="assets/svg/cv_text.svg" class="svg"></object> 
    </button> 
    <button type="button" class="btn btn-info" [routerLink]="['editor/image-properties']"> 
    <object type="image/svg+xml" data="assets/svg/cv_image.svg" class="svg"></object> 
    </button> 
    <button type="button" class="btn btn-info" [routerLink]="['editor/background-properties']"> 
    <object type="image" data="assets/svg/cv_photo.svg" class="svg"></object> 
    </button> 
    <button type="button" class="btn btn-info" [routerLink]="['editor/background-properties']"> 
    <span class="glyphicon glyphicon-photo svg"></span> 
    </button> 
</div>

正如你所看到的，最后一个按钮的工作原理。前三个不要。最后一个是我最初的样子。这里是路由器打字稿文件：

import { Routes, RouterModule } from "@angular/router"; 

import { EditorTextPropertiesComponent } from "./editor/editor-properties/editor-text-properties/editor-text-properties.component"; 
import { EditorImagePropertiesComponent } from "./editor/editor-properties/editor-image-properties/editor-image-properties.component"; 
import { EditorBackgroundPropertiesComponent } from "./editor/editor-properties/editor-background-properties/editor-background-properties.component"; 

const APP_ROUTES: Routes = [ 
    { path: 'editor/text-properties', component: EditorTextPropertiesComponent }, 
    { path: 'editor/image-properties', component: EditorImagePropertiesComponent }, 
    { path: 'editor/background-properties', component: EditorBackgroundPropertiesComponent } 
]; 

export const routing = RouterModule.forRoot(APP_ROUTES);

但是这里不应该有任何错误，因为我的旧按钮仍然正常工作。我在uBlock Origin的控制台中发现了一个错误，但是当我在隐身窗口中打开它时，错误消失了，它仍然无法正常工作，所以不能这样做。这里是错误：

Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_image.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_zoom_out.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_zoom_in.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_text.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 
chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79 Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:4200/assets/svg/cv_photo.svg 
    at chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/js/contentscript.js:79

任何帮助将不胜感激！

编辑：所以我看到，如果我点击边框我的按钮它确实工作。所以我的svg元素在工作的routerlink前面。编辑2：知道边界的工作原理，我认为底层div工作，所以我添加了“pointer-events：none;”到元素。这工作！现在它通过元素点击。

来源

2017-01-17 Martijn van den Bergh

它来自您的uBlock扩展 – n00dl3

那么，它会在隐身模式下工作？所有插件都禁用的地方。但它仍然不起作用，所以它必须是别的东西。 –

我编辑我的答案的问题也：

所以我看到，如果我点击边界我的按钮，它的工作。所以我的svg元素在工作的routerlink前面。

知道边界的工作原理，我认为底层div工作，所以我加了“pointer-events：none;”到元素。这工作！现在它通过元素点击。

来源

2017-01-17 08:55:41

Routerlink不支持Angular2中的SVG's

回答

相关问题