Internet Explorer 11 无法识别 attr.xlink:href答案

【问题标题】：Internet Explorer 11 cannot recognize attr.xlink:hrefInternet Explorer 11 无法识别 attr.xlink:href
【发布时间】：2016-11-25 05:35:27
【问题描述】：

我是 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>

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

我看不出有什么问题。非常感谢任何帮助。

编辑：

这个错误被打印到控制台

异常：TypeError：无法在 [_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);
      }
    }
  }

【问题讨论】：

IE 永远不会得到attr.xlink:href="#{{ _iconClass }}"。这是由 Angular 解析的，只有在绑定解决后才添加到 DOM 中。
您是否在浏览器控制台中收到任何消息？也许消毒会修改或删除某些东西。 github.com/angular/angular/issues/9510, angular.io/docs/ts/latest/api/platform-browser/index/…
那么我发现问题的假设是错误的。我认为它应该将_iconClass 的值写入xlink:href。例如<use xlink:href="#brand--3d"></use>
应该的。也许 id 引用存在问题。铃响了，但我可能弄错了。您是否在浏览器控制台中检查了消息？
异常：类型错误：无法在 [_iconClass in MyIcon@1:9] 中获取未定义或空引用的属性“包含”

标签： css html svg angular

【解决方案1】：

甘特

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

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

【讨论】：