Angular2 + SVG：使用一个模板用于多个组件（IE修复？）

Question

我有多个SVG图标，它们使用相同的html模板插入一个字符串（包含SVG标记）。除IE11之外，所有其他浏览器都可以正常运行（我相信IE11以下的任何内容都会有相同的问题）。

这是模板的外观：

<svg data-component [attr.viewBox]="vbox" preserveAspectRatio="none">
   <svg:g #svgContainer></g>
</svg>
<span *ngIf="label">{{ label | translate }}</span>

这是基本图标类，随后每个其他图标组件对其进行扩展：

import { Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export class IconBase implements AfterViewInit {

  @Input('icon-label') public label: string;
  @Input('icon-vbox') public vbox: string = '0 0 30 30';

  @ViewChild('svgContainer') public svgContainer: ElementRef;

  public svgString: any = '';

  ngAfterViewInit(): void {
    this.svgContainer.nativeElement.innerHTML = this.svgString;
  }
}

到目前为止很好。现在，这里是一个icon component，它与其他所有图标组件一样仅设置svgString。其他所有内容都在基本图标类中处理：

import { Component } from '@angular/core';
import { IconBase } from './icon';

@Component({
    moduleId: module.id,
    selector: 'icon-view-list, [icon-view-list]',
    templateUrl: './icon.html'
})

export class IconViewListComponent extends IconBase {
    public svgString: string = `
        <path class="st0" d="M5.1,10H10V5.1H5.1V10z M12.5,5.1V10h12.4V5.1H12.5z M12.5,17.5h12.4v-4.9H12.5V17.5z M12.5,24.9h12.4V20H12.5
        V24.9z M5.1,17.5H10v-4.9H5.1V17.5z M5.1,24.9H10V20H5.1V24.9z"/>
    `;
}

该字符串可以是path，line，polyline，circle-基本上是任何SVG元素。

Chrome和Firefox将字符串插入<svg>元素，但是IE不执行任何操作-它仅呈现空的<svg>。我试图通过命名svg元素的位置来遵循建议，但是应该这样做没有帮助。有什么建议么？也许完全重构了一些代码？

谢谢。

Answer 1

可能是您缺少构造函数？您可能需要在组件中调用super（）