Routerlink 不适用于 Angular2 中的 SVG

Question

我将工具栏从 Bootstrap 中的字形更改为自定义 SVG。 我通过 an 在外部引用了 SVG，因为我需要在一个 .css 文件中设置它们的样式。 我的 html 组件如下所示：

    <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 前面。

EDIT2：知道边框有效，我认为底层 div 有效，所以我添加了“指针事件：无；” 到元素。 这有效！ 现在它点击元素。

Answer 1

我也在问题中编辑了我的答案：

所以我看到如果我点击边框我的按钮它确实有效。 所以我的 svg 元素在工作的 routerlink 前面。

知道边界有效，我认为底层 div 有效，所以我添加了“指针事件：无；” 到元素。 这有效！ 现在它点击元素。