时间戳

首页 > 解决方案 > 如何使用 xlink:href 主机绑定获取组件以在启用 ivy 的情况下以角度工作

angular - 如何使用 xlink:href 主机绑定获取组件以在启用 ivy 的情况下以角度工作

问题描述

我无法为此做出成功的 plunkr，所以无论如何我都试图根据描述来问这个问题。我们有一个 NG 组件，它使用主机绑定将图标属性绑定到 svg xlink:href。

@Component({
  selector: 'use', // tslint:disable-line
  template: ``
})
export class SohoIconUseComponent {
  // This works but we cant use it because it fails on Safari 12
  // @HostBinding('attr.href') get href(): string {
  //   return '#' + this.icon;
  // }

  // This does not work
  @HostBinding('attr.xlink:href') get xhrefLink(): string {
    return '#' + this.icon; 
  }

  @Input() icon: string;
}

因此，一旦我们升级到 NG 9 并启用 Ivy，我们的图标就会停止工作。但是如果我们禁用 ivy，它将与 href 或 xlink:href 一起使用。

尝试在 Ng 回购中寻找错误，但似乎无法解决这个问题？有什么想法吗？

我的一个想法是您setAttributeNS有时必须使用来设置 xlink:href。我想知道我是否需要以不同的方式绑定主机绑定，以便它使用setAttributeNS？

标签： angularsvgangular-ivy

解决方案

推荐阅读