css - Internet Explorer 11 无法识别 attr.xlink :href

Question

我是 Angular 2 的新手。我正在尝试创建图标组件。下面的代码在 Chrome 和 Firefox 中运行良好，但在 Internet Explorer 11 中不起作用。

我的组件如下所示:

@Component({
  selector: 'my-icon',
  template: `
    <svg *ngIf="_iconClass" class="icon" [ngClass]=_iconClass 
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="" attr.xlink:href="#{{ _iconClass }}" />
    </svg>
  `
})
export class MyIcon {

  private _iconClass: string = '';
  @Input() set iconClass(i: string) {
    if ((i !== undefined) && (i.indexOf('.ico') > -1)) {
      // remove .ico from iconname
      this._iconClass = i.substr(0, i.length - 4);
    } else {
      this._iconClass = i;
    }
  }

然后，我在另一个组件中使用它如下:

<my-icon iconClass="icon--user"></my-icon>

我还没有添加所有代码，希望它仍然有意义。当我 checkin 开发人员工具时，标记 <use xlink:href>是空的。我的假设是 IE 11 无法识别 attr.xlink:href="#{{ _iconClass }}" .

我看不出有什么问题。如果有任何帮助，我将不胜感激。

编辑:

这个错误被打印到控制台

EXCEPTION: TypeError: Unable to get property 'contains' of undefined or null reference in [_iconClass in MyIcon@1:9]

private validateIcon(): void {
    if ((this._iconClass !== undefined) && (this._iconClass !== '') && (document.getElementById(this._iconClass) === null)) {
      if (this._validateIconRunOnce) {
        console.warn('Icon(' + this._iconClass + ') not found.');
        this._iconClass = 'not-found';
      } else {
        // delay validate icon for 3s to wait until the iconlibrary is loaded
        this._validateIconRunOnce = true;
        setTimeout(() => this.validateIcon(), 3000);
      }
    }
  }

Answer 1

甘特

非常感谢您的支持。我在这里找到了解决方案:https://github.com/eligrey/classList.js

要在 IE9+ 中支持 svg，需要添加 classList.js。